Есть ли селектор CSS только для первого прямого потомка?

315

У меня есть следующий 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". Как я могу изменить селектор, чтобы получить то, что я хочу?

html css css-selectors Джереми
источник
3
jsfiddle.net/joelpurra/7t5CK
Джоэл Пурра

Ответы:

519

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

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

div.section > div

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

div.section > div:first-child

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

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

Matchu
источник
8
: первый ребенок не требуется, в этом случае.
eozzy
3
кажется, что OP не столько спрашивает о селекторе, сколько о том, почему правило применяется ко всем дочерним элементам div.
Даг Нейнер
Моя интерпретация заключается в том, что он получает концепцию наследования CSS, и думал, что первый ребенок будет иметь такой эффект. Это довольно неясная формулировка.
Матчу
3
Ах, радости от того, что ты достаточно взрослый, чтобы помнить, когда селектор «прямого потомка» решит все твои проблемы, но ты не мог его использовать, потому что он не работал в IE . Тогда возникнет много ненужных разочарований.
aroth
Это относится и к первому ребенку первого ребенка. Если действительно необходимо применить изменения только к первому ребенку, мы должны отменить изменения для детей этого ребенка. Примерно так:div.section > div:first-child > div { /* Cancel Changes*/}
Махди Дж. Ансари
51

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

.container > *:first-child
{
}
Том Гуллен
источник
44

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все еще будут черными.

Дуг Нейнер
источник
6

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

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

ЯegDwight
источник
Хорошая идея, к сожалению, мне также нужно поддерживать IE6, и если я использую h1, мне нужно будет установить размер шрифта для наследования, чтобы шрифт соответствовал шрифту тела, а ie7 и ниже не поддерживают наследование. Arg!
Джереми
Кроме того, у меня есть дочерние div-ы, а помещение дочерних div-ов в h1 нарушает правила, хотя IE его отображает, я не уверен, что делают другие браузеры
Джереми
3

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

.section > :first-child

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

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

div.section > :first-child
Мэтт Паркинс
источник