it-roy-ru.com

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

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

73
The Muffin Man

Селектор 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;
}
176
BoltClock

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

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

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

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

11
Rob Sobers

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

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

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

8
Grekz

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

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

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

4
Fabrice

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

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

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

0
Edmond Chow