Есть ли селектор 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 content 1», <div> а также к «header» <div> .

Я думал, что селектор стиля будет применяться только к первому прямому потомку div с классом, называемым "section". Как я могу изменить селектор, чтобы получить то, что я хочу?

То, что вы опубликовали, буквально означает: «Найдите все div, которые находятся внутри div'ов раздела и являются первыми дочерними элементами их родителей». Подпрограмма содержит один тег, соответствующий этому описанию.

Мне неясно, хотите ли вы обоих детей основного div или нет. Если так, используйте это:

div.section > div

Если вы хотите только заголовок, используйте это:

div.section > div:first-child

Использование >изменяет описание на: «Найдите дивы , которые являются прямыми потомками разделы дивы» , которая является то , что вы хотите.

Обратите внимание, что все основные браузеры поддерживают этот метод, кроме IE6. Если поддержка IE6 критически важна, вам нужно будет добавить классы к дочерним элементам div и использовать их вместо этого. Иначе об этом не стоит заботиться.

Нашел этот вопрос в поиске в Google. Это вернет первый дочерний элемент с классом container, независимо от типа дочернего элемента .

.container > *:first-child
{
}

CSS называется Cascading Style Sheets, потому что правила наследуются. Используя следующий селектор, будет выбрать только прямой ребенок родителя, но его правила будут унаследованы тем , что divДетские divs:

div.section > div { color: red }

Теперь и это, div и его дети будут red. Вам нужно отменить все, что вы установили для родителя, если вы не хотите, чтобы он наследовал:

div.section > div { color: red }
div.section > div div { color: black }

Теперь только тот сингл, divкоторый является прямым ребенком, div.sectionбудет красным, но его дети divsвсе еще будут черными.

div.section > div

Использование div.section > div.

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

Селектор CSS для прямого первоочередного в вашем случае:

.section > :first-child

Прямой селектор>, а первый дочерний селектор: first-child

Нет необходимости в звездочке перед: как другие предполагают. Вы можете ускорить поиск DOM, изменив это решение, добавив тег:

div.section > :first-child