Используя CSS first-child, чтобы выбрать первый H2 - PullRequest
Новая
       1

Используя CSS first-child, чтобы выбрать первый H2

3 голосов
/ 30 марта 2011 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<style type="text/css">
h2:first-child
{
background:yellow;
} 
</style>
</head>
<body>
<div class="car">
    <div>Something</div>
    <h2>I want to style this</h2>
    <p>bla bla</p>
    <h2>I don't want to style this</h2>
    <p>bla bla bla</p>
</div>

</body>
</html>

У меня проблемы с стилизацией первого h2, "Я хочу стилизовать это", так как у меня есть div прямо перед первым h2, я не могу выбрать его, но если его там не было, он будетРабота.Без редактирования HTML (и, конечно, без использования JS) есть ли способ выбрать первый H2?Или единственный способ обернуть h2 другим элементом, как показано ниже? 

<div class="car">
    <div>Something</div>
<div>
        <h2>I want to style this</h2>
        <p>bla bla</p>
        <h2>I don't want to style this</h2>
        <p>bla bla bla</p>
</div>
</div>

Ответы [ 2 ]

9 голосов
/ 30 марта 2011

Если вы хотите перейти на CSS3 , то селектор first-of-type - это именно то, что вы пытаетесь выполнить.

Вот пример: http://jsfiddle.net/m3yrR/1/

first-of-type всегда будет выбирать первое вхождение элемента на любом уровне. Так что для вашего случая это будет стиль <h2> на любом уровне дерева разметки. Конечно, вы можете использовать более конкретные селекторы, чтобы ограничить, где он будет выбран. :)

В противном случае, да, вам придется сделать что-то вроде обернуть это в другой <div>, убедиться, что это первый элемент, а затем выполнить div > h2:first-child. Или просто h2:first-child, если вы хотите быть менее конкретным.

Просто убедитесь, что это первый дочерний элемент (!!) своего родителя, и будьте конкретны, как вам необходимо в иерархии parent-child.

5 голосов
/ 30 марта 2011

Существует более простой способ, чем метод Сапфа, это CSS2 с использованием смежного селектора:

.car div + h2{}

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

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

...