У меня есть сложная проблема, в которой я хотел, чтобы все мои теги h2 наследовали стили CSS. Я не могу сделать это глобально, так как это повлияет на некоторые стили CSS моего компонента. Мне пришлось специально отделить файл CSS, чтобы добиться этого. Вот следующий вывод html:
<div id = "center">
<h2>Sample center h2</h2>
<div id = "secondDiv">
<h2>Sample secondDiv h2</h2>
<div id = "thirdDiv">
<h2>Sample thirdDiv h2</h2>
</div>
</div>
</div>
У меня есть это текущее решение, где я сделал ниже:
#center h2 {
text-align: center;
}
#center > div > h2 {
text-align: center;
}
#center > div > div > h2 {
text-align: center;
}
Я думаю, что это довольно утомительно, и примеры внутренних блоков имеют динамические идентификаторы в моем реальном приложении. Я хотел повлиять на все теги h2, возможно, с помощью одной строки кода CSS? Спасибо!
Вам нужны все эти вложения, потому что некоторые из внутренних div изменяют настройки, которые вы хотите унаследовать от верхнего? Если вы сделаете исполняемый фрагмент, мы сможем помочь больше. См. stackoverflow.com/help/minimal-reproducible-example
@ petern0691 petern0691 Я пытался использовать только первое правило CSS, но не знал, почему оно не влияет на внутренние теги h2.
@AHaworth хорошо, я попробую создать фрагмент.
Вы должны делать что-то еще, кроме того, что вы показали выше, потому что первое правило работает для меня.
Вы, вероятно, можете использовать селектор is()
, чтобы написать один селектор, если вам нужно перезаписать правила где-то еще в вашем css. #center :is(h2,div>h2,div>div>h2) {text-align :center ;}
. Зависит от вашей реальной ситуации.
Кажется, у меня все хорошо. Спасибо за комментарии! Первое правило CSS выше было решением.
Ответом на эту проблему было первое правило CSS, которое я написал. Спасибо за помощь!
#center h2 {
text-align: center;
}
Ваше первое правило CSS, указанное выше, повлияет на все теги «h2», которые являются потомками «центра». Вам больше не нужны никакие правила.