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

Question

У меня есть следующий 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>, а также к "header" <div>.

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

Answer 1

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

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

div.section > div

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

div.section > div:first-child

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

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

Answer 2

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 будут по-прежнему черными.

Answer 3

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

.container > *:first-child
{
}

Answer 4

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

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

Answer 5

div.section > div