Есть ли селектор 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

использовать div.section > div.

лучше использовать <h1> тег для заголовка и div.section h1 в вашем CSS, чтобы поддерживать старые браузеры (которые не знают о >) и сохранить разметку семантической.