<!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>
最佳答案
如果您愿意分支到 CSS3 , first-of-type选择器正是您想要完成的。
这是一个例子:http://jsfiddle.net/m3yrR/1/
first-of-type将始终选择元素在任何级别的第一次出现。因此，对于您的情况，它将设置第一个 <h2> 的样式。在标记树中的任何级别。您当然可以使用更具体的选择器来限制它被选中的位置。 :)
否则，是的，你必须做一些事情，比如将它包装在另一个 <div> 中, 确保它是第一个元素，然后执行 div > h2:first-child .或者只是 h2:first-child ，如果你不想那么具体的话。
只需确保它是其父项的第一个子项 (!!)，并根据父子层次结构的需要具体说明。
关于html - 使用 CSS first-child 选择第一个 H2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5482459/