Есть ли селектор CSS только для первого прямого ребенка?
у меня есть следующий HTML -
<div class="section">
<div>header</div>
<div>
contents
<div>sub contents 1</div>
<div>sub contents 2</div>
</div>
</div>
и следующий стиль:
DIV.section DIV:first-child
{
...
}
по какой-то причине, что я не понимаю, стиль применяется к "sub contents 1" <div>
а также "заголовок" <div>
.
Я думал, что селектор по стилю будет применяться только к первому прямому потомку div с классом под названием "раздел". Как я могу изменить селектор, чтобы получить то, что я хочу?
5 ответов
то, что вы разместили буквально означает "найти любые divs, которые находятся внутри раздела divs и являются первым ребенком их родителя.- Подлодка содержит один тег, соответствующий этому описанию.
мне непонятно, хотите ли вы обоих детей основного div или нет. Если да, используйте это:
div.section > div
Если вы хотите только заголовок, используйте это:
div.section > div:first-child
С помощью >
изменяет описание На: "найти любые divs, которые являются прямыми потомками раздела divs " это то, что вы хотите.
обратите внимание, что все основные браузеры поддерживают этот метод, за исключением IE6. Если поддержка IE6 критически важна, вам придется добавить классы в дочерние divs и использовать их вместо этого. В противном случае, об этом не стоит беспокоиться.
CSS называется каскадными таблицами стилей, потому что правила наследуются. Используя следующий селектор,будет выберите только прямой дочерний элемент родителя, но его правила будут унаследовала этой с divs
:
div.section > div { color: red }
теперь, как это div
и его дети будут red
. Вам нужно отменить все, что вы установили на родителя, если вы не хотите, чтобы он унаследовал:
div.section > div { color: red }
div.section > div div { color: black }
теперь только это один div
это прямой ребенок div.section
будет красным, но его дети divs
по-прежнему будет черным.
нашел этот вопрос в поиске в Google. Это вернет первый дочерний элемент элемента с class container
, независимо от типа ребенка.
.container > *:first-child
{
}
использовать div.section > div
.
лучше использовать <h1>
тег для заголовка и div.section h1
в вашем CSS, чтобы поддерживать старые браузеры (которые не знают о >
) и сохранить разметку семантической.