Как повлиять на все теги h2 внутри определенного идентификатора div и с внутренними div

У меня есть сложная проблема, в которой я хотел, чтобы все мои теги 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? Спасибо!

Ваше первое правило CSS, указанное выше, повлияет на все теги «h2», которые являются потомками «центра». Вам больше не нужны никакие правила.

petern0691 27.11.2022 10:01

Вам нужны все эти вложения, потому что некоторые из внутренних div изменяют настройки, которые вы хотите унаследовать от верхнего? Если вы сделаете исполняемый фрагмент, мы сможем помочь больше. См. stackoverflow.com/help/minimal-reproducible-example

A Haworth 27.11.2022 10:06

@ petern0691 petern0691 Я пытался использовать только первое правило CSS, но не знал, почему оно не влияет на внутренние теги h2.

luffypirates 27.11.2022 10:10

@AHaworth хорошо, я попробую создать фрагмент.

luffypirates 27.11.2022 10:11

Вы должны делать что-то еще, кроме того, что вы показали выше, потому что первое правило работает для меня.

petern0691 27.11.2022 10:17

Вы, вероятно, можете использовать селектор is(), чтобы написать один селектор, если вам нужно перезаписать правила где-то еще в вашем css. #center :is(h2,div>h2,div>div>h2) {text-align :center ;} . Зависит от вашей реальной ситуации.

G-Cyrillus 27.11.2022 11:00

Кажется, у меня все хорошо. Спасибо за комментарии! Первое правило CSS выше было решением.

luffypirates 12.12.2022 03:46
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
7
93
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ответом на эту проблему было первое правило CSS, которое я написал. Спасибо за помощь!

#center h2 {
   text-align: center;
}

Другие вопросы по теме