Чи є селектор 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.section > div

Якщо ви хочете лише заголовок, використовуйте це:

div.section > div:first-child

Використовуючи >зміну опису на: "Знайдіть будь-які диви, які є прямими нащадками розділів divs", що саме ви хочете.

Зверніть увагу, що всі основні браузери підтримують цей метод, крім IE6. Якщо підтримка IE6 є критично важливою для місії, вам доведеться додати класи до дочірніх divs і використовувати це замість цього. Інакше дбати не варто.

Знайшли це запитання в пошуку в Google. Це поверне першу дочірню частину елемента з класом container, незалежно від типу дитини.

.container > *:first-child
{
}

Таблиці 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все ще будуть чорними.

div.section > div

Використовуйте div.section > div.

Ще краще, використовуйте <h1>тег для заголовка та div.section h1у своєму CSS, щоб підтримувати старіші веб-переглядачі (які не знають про це >) та зберігати розмітку семантики.

Селектор CSS для прямої дитини у вашому випадку є:

.section > :first-child

Прямий селектор ->, а перший дочірній селектор: перша дитина

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

div.section > :first-child