: first-child не работает должным образом

99

Я пытаюсь выбрать первый 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. Как заставить его работать?

css css-selectors Человек-маффин
источник
1
То, что CSS не может сделать, может сделать JavaScript.
JCOC611,
11
Это то, что вы можете сделать с помощью CSS3 :)
BoltClock

Ответы:

222

В h1:first-childсредстве селектора

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

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

Для :first-of-typeвашего случая есть CSS3 :

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

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

.detail_container h1.first
{
    color: blue;
}
BoltClock
источник
2
Теперь я понимаю, хотя думаю, что при создании стандарта они должны были реализовать обе версии.
The Muffin Man
Не работает в версии IE9. В инструменте разработчика написано h1: unknown
Cine
11
Список совместимости в :first-of-typeселекторе.
Джесс Телфорд
4
Новее список совместимости в :first-of-type. Старая ссылка неверна.
BadHorsie
На мой взгляд, этот термин :first-childне совсем понятен, потому что вы определяете элемент, скажем h1, как селектор CSS, а затем думаете «взять первого потомка» из всех на выбранном уровне DOM. Я столько раз использовал его неправильно ... Мы должны привыкнуть к :first-of-typeселектору и подумать о первом дочернем элементе его типа.
Кай Ноак
15

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

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

:firstСелектор jQuery дает вам то, что вы ищете. Ты можешь это сделать:

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

Роб Соберс
источник
Ваше право, это вводит в заблуждение, в основном я запутался, потому что раньше использовал jQuery для этого.
The Muffin Man
9

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

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

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

Grekz
источник
У тебя не должно быть никаких проблем. Вот ссылка w3.org/TR/CSS2/selector.html#child-selectors
Grekz
6

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

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

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

Фабрис
источник
1

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

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
GhostToast
источник
0

Элемент не может напрямую наследовать от <body>тега. Можно попробовать поместить в <dir style="padding-left:0px;"></dir>тег.

Эдмонд Чоу
источник