Переопределение свойства CSS all: unset
Для разработки CSS-фреймворка я использую all: unset, который сам по себе работает нормально:
#foo { all: unset; }
Однако в некоторых случаях я хочу "отменить" действие этого правила, как в
#foo:hover { all: auto; }
Тем не менее, это, очевидно, не работает, потому что нет значения auto за all, Вместо этого у нас есть значения inherit а также initialкоторый вместо "отмены" all свойства, имеют разные эффекты: от возврата всех значений к значению их родителя или к их начальным (я предполагаю, что это означает значения по умолчанию на уровне системы).
Чтобы выполнить то, что я хочу, я сейчас делаю
#foo:not(:hover) { all: unset; }
который работает нормально, но не слишком масштабируем, если я хочу сделать это для нескольких псевдоклассов, например, и я бы предпочел переопределить all: unset имущество? Есть ли способ сделать это?
3 ответа
По-видимому, невозможно отменить последствия all свойство, как только оно было указано. Это может быть связано с all является сокращенным свойством (которое принимает только ключевые слова в формате CSS в качестве значений).
Вы не можете стереть краткую декларацию из каскада так же, как введение css-cascade-4 revert Ключевое слово позволяет вам стереть объявления уровня автора, потому что сокращенное свойство не существует как собственная сущность в каскаде; вместо этого он просто представляет все свои свойства компонентов. Как с более традиционными сокращенными свойствами, такими как background а также fontединственный способ переопределить сокращенное объявление, которое было применено, состоит в том, чтобы переопределить значения для длинных цепей, которые были переопределены, либо через произвольные объявления, либо через другое сокращенное объявление. Но вы не можете сделать последнее с all свойство, поскольку он принимает только ключевые слова в формате CSS.
Поскольку первое явно не практично с all сокращенно, так как вы не можете предсказать, какие объявления уровня автора будут переопределены для начала, ваш единственный другой вариант - ограничить его с помощью селектора, тем самым предотвращая его применение в определенных обстоятельствах в первую очередь. Надеюсь, мы увидим больше реализаций уровня 4 :not() в ближайшее время, что сделает написание селекторов немного проще.
В дополнение к тому, что объяснил BoltClock, то, что вы хотите, в настоящее время невозможно даже для не сокращенных свойств.
* { color: red; }
#foo { color: unset; }
#foo:hover { color: /* How to revert to red? */ }
После того, как вы добавите значение, которое выигрывает каскад, нет способа сказать каскаду "вернуться" и получить вместо него предыдущего победителя. Вы должны установить это явно, но это возможно, только если вы это знаете.
Самая близкая вещь revert ключевое слово, введенное CSS Cascade 4, которое откатывает каскад к предыдущему исходному уровню. Но откат каскада к предыдущему победителю на том же уровне происхождения в настоящее время невозможен.
Тогда решение ограничивает ваши селекторы применять только тогда, когда вы хотите их. Таким образом, нет необходимости отменять.