#html #css
#HTML #css
Вопрос:
Я all: unset
должен отменить все свойства наследования, но разрешить таблицу стилей пользовательского агента. Как я могу это сделать? Как вы можете видеть в коде, он отключает все стили, даже таблицы стилей пользовательского агента. Как я могу предотвратить отключение таблицы стилей пользовательского агента?
h1, h2 {
color: red;
font-size: 24px;
font-weight: bold;
}
.editor_data * {
all: unset;
}
<div class="main_block">
<h2>Should be red</h2>
<div class="editor_data">
<h1><u><em><strong>Should be underlined, bold, italics, but not red</strong></em></u></h1>
</div>
</div>
Комментарии:
1. в качестве примечания наследование не переопределяет стиль пользовательского агента, так зачем использовать unset?
2. Возможно, попробуйте
initial
вместоunset
?3. начальное свойство не работает.
Ответ №1:
Попробуйте ключевое revert
слово вместо initial
или unset
Ключевое слово revert полезно для изоляции встроенных виджетов или компонентов от стилей страницы, которая их содержит, особенно при использовании со свойством all .
В пользовательских таблицах стилей revert откатывает каскад и сбрасывает свойство до значения по умолчанию, установленного таблицей стилей user-agent.
h2 {
color: red;
font-size: 24px;
font-weight: bold;
}
.editor_data * {
all: revert;
}
<div class="main_block">
<h2>Hello world!</h2>
<div class="editor_data">
<h1><u><em><strong>Hello world!</strong></em></u></h1>
</div>
</div>
Комментарии:
1. Никто не знает, будет ли это соответствовать фактическим спецификациям. И это не работает в Chrome.
2. Я впервые вижу такое значение атрибута, но это помогло мне. Я сбрасываю все поля и отступы на 0,
* {margin: 0; padding: 0;}
но где-то это нужно. unset и initial не сработали. Это редкий случай, но приятно, что есть решение. 2022, работает в firefox, Chrome и edge кстати
Ответ №2:
Вы должны установить all: initial
для родительского элемента, а затем объявить all: unset
для всех его дочерних элементов.
.editor_data {
all: initial;
}
.editor_data * {
all: unset;
}