CSS 伪类用于向某些选择器添加特殊的效果。
CSS伪类的基础语法：
selector : pseudo-class {
property: value
}
当然，CSS类也可以与伪类搭配使用：
selector.class : pseudo-class {
property: value
}
在我第一次看到 :first-child 伪类时，我的第一个感觉就是，这是在针对指定元素的第一个子元素起作用，很明显，我是根据字面意思来理解的。
但结果令我感到很意外，我的感觉是完全错的，而且错的很离谱，因为 :first-child 伪类的意思是，指定元素是上级元素中的第一个子元素时起作用，也就是，当它自己是第一个子元素时起作用，并不是之前以为的它的第一个子元素起作用。
还是先上代码看效果吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:first-child 伪类</title>
<style>
div {
border: solid 1px aqua;
padding: 10px;
margin: 10px auto;
}
.box {
width: 300px;
}
p:first-child {
color: red;
}
</style>
</head>
<body>
<div class="box">
<p>最外层第一行文本</p>
<p>最外层第二行文本</p>
<div>
<p>第二层第一行文本</p>
<p>第二层第二行文本</p>
</div>
<div>
<span>第二层第一行文本</span>
<p>第二层第二行文本</p>
<p>第二层第三行文本</p>
</div>
</div>
</body>
</html>
上面这块儿代码，执行的效果如下图
image
相信这段代码和效果已经很明显了，目的是使用 :first-child 伪类将 p 标签变红。
最外层的 div 和中间第一个 div 的第一行文本都变成了红色，因为它们的第一个元素都是 p，而第二层的第二个 div 里的第一行文本并没有变成红色，这是因为在这个 div 里，第一个元素是 span，并不是 p。
从这个示例及效果可以看出，:first-child 伪类仅针对指定元素或类作为当前层级的第一个元素时起作用，也就是指定元素是兄弟元素中的老大时起作用。
不得不吐槽下这个命名，也忒容易让人误会了些。
网友评论