: первый ребенок не работает должным образом - PullRequest
Новая
       0

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

76 голосов
/ 22 декабря 2010

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

Ответы [ 6 ]

185 голосов
/ 22 декабря 2010

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

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

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

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

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

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

.detail_container h1.first
{
    color: blue;
}
11 голосов
/ 22 декабря 2010

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

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

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

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

8 голосов
/ 23 декабря 2010

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

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

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

4 голосов
/ 14 марта 2014

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

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

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

1 голос
/ 09 мая 2012

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

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
0 голосов
/ 07 ноября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...