2016-04-08 3 views
6

Для основы CSS я развиваю, я использую all: unset, что сам по себе прекрасно работает:Переопределение CSS свойство все незаданы

#foo { all: unset; } 

Однако, в некоторых случаях, я хочу, чтобы «отменить» эффект этого правила, как и в

#foo:hover { all: auto; } 

Однако, это, очевидно, не работает, потому что нет значения auto для all. Вместо этого у нас есть значения inherit и initial, которые вместо «отмены» свойства all имеют разные эффекты: возврат всех значений к их родительскому значению или их начальный (я предполагаю, что это означает значения по умолчанию на системном уровне).

Чтобы сделать то, что я хочу, я сейчас делаю

#foo:not(:hover) { all: unset; } 

, который прекрасно работает, но не слишком масштабируемым, если я хочу сделать это для нескольких псевдо-классов, например, и я предпочел бы переопределить свойство all: unset? Есть ли способ сделать это?

ответ

2

Это не представляется возможным отменить эффекты all собственности, как только он был определен. Это может быть связано с тем, что all является сокращенным свойством (которое, как правило, принимает только ключевые слова CSS как значения).

Вы не можете удалить сокращенную декларацию из каскада так же, как введение css-каскадом-4 ключевого слова revert позволяет стирать объявления уровня автора, и это связано с тем, что стенографическое свойство не существует как его собственный объект в каскаде; вместо этого он просто представляет все свои свойства компонента. Как и в случае с более традиционными стенографическими свойствами, такими как background и font, единственный способ переопределить сокращенную декларацию, которая была применена, - это переопределить значения для длинных диапазонов, которые были переопределены, либо через объявления длинной строки, либо через другую сокращенную декларацию. Но вы не можете использовать последнее свойство all, так как оно принимает только ключевые слова CSS.

Поскольку первое, очевидно, нецелесообразно использовать стенографию all, так как вы не можете предсказать, какие объявления на уровне автора переопределяются для начала, но ваш единственный вариант - ограничить его с помощью селектора, тем самым предотвратив его когда-либо применяя в определенных обстоятельствах в первую очередь. Будем надеяться, что в ближайшем будущем мы увидим больше реализаций уровня 4 :not(), что облегчит запись селекторов.

0

Вы пробовали

all: revert 

Больше информации здесь MDN

+0

Это возвращает значения в значения по умолчанию для браузера, что является одной из вещей, которые пытается избежать. – BoltClock

+0

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

+0

Да, я видел 'revert', но, кроме того, что не делаю то, что хочу, он почти не поддерживается. –

2

Кроме того, что объясняет BoltClock, то, что вы хотите, в настоящее время невозможно даже для не стенографических свойств.

* { color: red; } 
#foo { color: unset; } 
#foo:hover { color: /* How to revert to red? */ } 

После того, как вы добавите значение, которое выигрывает каскад, не существует способ сказать каскад на «вернуться» и получить предыдущий победитель вместо этого. Вы должны установить его явно, но это возможно только в том случае, если вы это знаете.

Ближайшая вещь - revert keyword, представленная CSS Cascade 4, которая откатывает каскад до предыдущего уровня происхождения. Но переключение каскада назад на предыдущего победителя на том же уровне происхождения в настоящее время невозможно.

Затем решение ограничивает использование ваших селекторов только тогда, когда вы их хотите. Таким образом, нет необходимости отменять.

+1

«Но каскад назад к предыдущему победителю на том же уровне происхождения в настоящее время невозможен». И причина этого в том, что каскад не может определить, что такое «предыдущий победитель». Если бы он просто принял порядок деклараций, несмотря на определенность, это было бы очень подвержено ошибкам. – BoltClock

Смежные вопросы