Как применить CSS только к непосредственным дочерним элементам определенного класса

Question

У меня есть div, и внутри этого div я хочу создать другой div с другим классом, причем внутренний div должен быть полностью отделен от CSS-настроек внешнего div.

Пример структуры:

<div class="outer">
    <div><h1> h1 </h1></div>
    <div class="inner">
        <h2> h2 </h2>
    </div>
    <h2> h2 </h2>
</div>

Пример CSS:

.outer h1{ color:blue; }
.outer h2{ color:red; }

.inner { height: 111px; }

Что я хочу сделать, так это отменить красный цвет для h2 внутри "inner"

.

Это может показаться глупым, поскольку можно просто переопределить цвет на черный, но что, если в CSS много других свойств или если они динамические.

Правка: Пожалуй, это не совсем ясно, но на самом деле мне нужно нечто противоположное тем ответам, которые я получил до сих пор. У меня есть основной контейнер

, и в нем много настроек в CSS. Теперь я хочу вставить

в основной контейнер, не подчиняясь никаким настройкам CSS основного контейнера.

html css

Answer 1

Данный CSS-код .outer > h2 { color: red; } применяет стиль цвета текста (красный) только к элементам <h2>, которые являются непосредственными потомками элемента с классом outer. Это означает, что если у вас есть несколько элементов <h2> внутри других элементов, которые также находятся внутри outer, они не получат красный цвет. Таким образом, использование > решает вашу задачу, применяя цвет только к нужным элементам.

Answer 2

Я думаю, вам нужно использовать следующий код:

.inner h2 {color: inherit}

Этот стиль установит цвет заголовка h2 внутри элемента с классом inner таким же, как и у родительского элемента.

Как применить CSS только к непосредственным дочерним элементам определенного класса

2 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных