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

По какой-то причине я не понимаю, что стиль применяется к "субсоединению 1" <div>, а также к "заголовку" <div>.

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

Ответ 1

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

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

div.section > div

Если вам нужен только заголовок, используйте это:

div.section > div:first-child

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

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

Ответ 2

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

div.section > div { color: red }

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

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

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

Ответ 3

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

.container > *:first-child
{
}

Ответ 4

div.section > div

Ответ 5

Используйте div.section > div.

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

Ответ 6

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

.section > :first-child

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

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

div.section > :first-child