: первый ребенок не работает должным образом

Я пытаюсь выбрать первый h1 внутри div с классом detail_container. Он работает, если h1 является первым элементом внутри этого div, но если он приходит после этого ul, он не будет работать.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

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

Ответ 1

Селектор h1:first-child означает

Выберите первый дочерний элемент своего родителя
если и только если это элемент h1.

:first-child контейнера здесь ul, и как таковой не может удовлетворить h1:first-child.

В вашем случае есть CSS3 :first-of-type:

.detail_container h1:first-of-type
{
    color: blue;
}

Но с проблемами совместимости с браузером и много чего вам лучше дать первый класс h1 a, а затем нацелиться на этот класс:

.detail_container h1.first
{
    color: blue;
}

Ответ 2

:first-child выбирает первый h1 тогда и только тогда, когда он является первым дочерним элементом его родительского элемента. В вашем примере ul является первым дочерним элементом div.

Название псевдокласса несколько вводит в заблуждение, но в спецификации явно было показано .

Селектор

jQuery :first дает вам то, что вы ищете. Вы можете сделать это:

$('.detail_container h1:first').css("color", "blue");

Ответ 3

В этом конкретном случае вы можете использовать:

.detail_container > ul + h1{ 
    color: blue; 
}

Но если вам нужен тот же самый селектор во многих случаях, у вас должен быть класс для тех, как сказал BoltClock.

Ответ 4

вы также можете использовать

.detail_container h1:nth-of-type(1)

Изменив номер 1 на любой другой номер, вы можете выбрать любой другой элемент h1.

Ответ 5

Вы можете обернуть теги h1 в другой div, а затем первым будет first-child. Для этого div даже не нужны стили. Это просто способ отделить этих детей.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>