使用CSS第一个孩子选择第一个H2

问题描述：

<!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，“我想这样”，因为我有一个权利之前，第一个h2我不能选择它，但如果它不在那里，它会起作用。没有编辑html（并且当然没有使用js）有没有办法选择第一个h2？或者正在用像下面这样的另一个元素包装h2的唯一方式？使用CSS第一个孩子选择第一个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>

答

没有比Sapph的方法更简单的方法使用相邻选择器是CSS2：

.car div + h2{}

整齐！不知道存在。 – Sapph 2011-03-30 14:21:43

@Sapph感谢您的回答，我现在将使用这种方法，因为一些旧版本的IE不支持CSS3。第一种类型确实有一个好处，你不需要知道它之前的元素。当更多人使用IE9时，我可能会开始使用它。 – Joker 2011-03-30 17:29:51

答

如果你愿意分支到CSS3，该first-of-type选择正是你想要完成的任务。

下面是一个例子：http://jsfiddle.net/m3yrR/1/

first-of-type将始终选择的元素在任何级别中首次出现。因此，对于您的情况，它会在标记树中的任何级别设置第一个<h2>。您当然可以使用更多特定的选择器来限制它被选中的位置。 :)

否则，是的，你必须做一些事情，如将其包装在另一个<div>，确保它是第一个元素，然后做div > h2:first-child。或者只是h2:first-child，如果你想不太具体。

只要确保它是其父项的第一个子项（!!），并且必须具体，因为您需要使用父子级别。

使用CSS第一个孩子选择第一个H2

相关推荐