使用 CSS first-child 选择第一个 H2答案

【问题标题】：Using CSS first-child to select first H2使用 CSS first-child 选择第一个 H2
【发布时间】：2011-03-30 16:06:05
【问题描述】：

<!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 之前有一个 div，我无法选择它，但如果它不存在，它会起作用。不编辑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>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

如果您愿意分支到CSS3，first-of-type 选择器正是您想要完成的。

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

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

否则，是的，您必须将其包裹在另一个 <div> 中，确保它是第一个元素，然后执行 div > h2:first-child。或者只是h2:first-child，如果你想不那么具体。

只需确保它是其父级的第一个子级 (!!)，并根据父子层次结构进行具体说明。

【讨论】：

【解决方案2】：

有一种比 Saph 的方法更简单的方法，即使用相邻选择器的 CSS2：

.car div + h2{}

【讨论】：

整洁！不知道存在。
@Sapph 也感谢您的回答，由于某些旧版本的 IE 不支持 CSS3，我现在将使用此方法。 first-of-type 确实有一个优势，因为您不需要知道它之前的元素。当更多人使用 IE9 时，我可能会开始使用它。