Question

<!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's，如下所示？

<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>

Answer 1

如果您愿意加入CSS3，first-of-type选择器正是您要完成的目标。

以下是一个示例：http://jsfiddle.net/m3yrR/1/

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

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

确保它是其父级的第一个子级（!!），并且具体，因为您需要使用父级子层次结构。

Answer 2

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

.car div + h2{}

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

2 个答案: