Блог

Я не уверен, как это объяснить, если не с примерами.

Допустим, у меня есть этот класс

 .padding1 {
    padding-top: 100px;
}
  

применяется к этому элементу

 <div class="myDiv padding1"></div>
  

с его собственными правилами, определенными позже, которые переопределят .padding1 правило. Как указать .myDiv , чтобы по умолчанию использовалось последнее полезное правило, определенное в .padding1?

 .myDiv {
    padding-top: 0; 
}
.specialPage .myDiv {
   padding-top: /* ignore my override */
}
  

Я знаю, что мог бы сделать это наоборот, но мне было интересно, можно ли это сделать таким образом, что может быть полезно в некоторых сложных проектах.

ОБНОВЛЕНИЕ: я, конечно, спрашивал, есть ли правило, которого мне не хватает. Я не хочу объявлять его снова и не использовать initial или inherit .

Я только что узнал об этом, есть возможный способ отменить использование стилей css revert-layer .

⚠ Предупреждение ⚠: По состоянию на 2022 год это ключевое слово является экспериментальным и не широко совместимым. В настоящее время только для Firefox и Firefox Android v97.

Ключевое слово revert-layer CSS возвращает значение свойства в каскадном слое к значению свойства в правиле CSS, соответствующему элементу в предыдущем каскадном слое.

Если нет другого каскадного слоя, к которому нужно вернуться для соответствующего правила CSS, значение свойства возвращается к вычисленному значению, полученному из текущего слоя. Кроме того, если в текущем слое нет соответствующего правила CSS, значение свойства для элемента возвращается к стилю, определенному в предыдущем источнике стиля.

Отличается от revert ключевого слова, которое возвращается непосредственно к настройкам браузера по умолчанию.

Дополнительные ресурсы:

• Создание слоев с @layer
• Происхождение стиля. Используется для определения, где остановить откат каскада стилей

Следующее должно работать (опять же, если ваш браузер совместим)

Элементы с классом ‘padding1‘ будут иметь размер заполнения 100 пикселей, если только у них также нет класса ‘myDiv‘, и в этом случае заполнение будет возвращено на 0, но если указанный элемент находится внутри родительского элемента с классом ‘specialPage‘, заполнение будет возвращено обратно на 100 пикселей.

 @layer base {
  .padding1 {
    padding-top: 100px;
  }
}

@layer special {
  .myDiv {
      padding-top: 0;
   }
  .specialPage .myDiv {
    padding-top: revert-layer;
  }
}  

 <div class="specialPage">
  <div class="myDiv padding1">Inside specialPage original padding</div>
</div>

<div class="myDiv padding1">Outside specialPage no padding</div>  

Вы можете использовать padding-top: unset; , которое полностью нейтрализует все предыдущие свойства с тем же именем для того же класса. Но для того, чтобы «перемотать» свойство, которое было раньше padding-top: 0; , вам нужно объявить его снова.

Как я понимаю, вы хотите, чтобы стиль .padding1 был реализован для обоих div. Я прав? Это можно сделать следующим образом

 <style>
   .padding1{
    padding-top: 100px !important;
}
 .myDiv {
    padding-top: 0; 
}
<style>
  

На странице HTML

 <div class="myDiv padding1"></div>
  

Теперь .myDiv будет иметь padding-top:100 пикселей;

У As .myDiv есть собственный «padding-top: 0», но он покажет «padding-top: 100 пикселей».

Надеюсь, это решит вашу проблему.

Вы могли бы использовать initial , чтобы установить для него значение по умолчанию.

     .myDiv {
        padding-top: 0;
    }

    .padding1 {
        padding-top: 100px;
    }

    .specialPage .myDiv {
        padding-top: initial;
    }