fist-child 伪类选择器

p:first-child{color: red;}

乍一看以为是父元素的第一个 p ,更确切的含义是选择父元素的第一个子元素,且该元素是 p

<!DOCTYPE html>
<html>
<head>
    <title>ThankIT</title>
</head>
<body>
<style>
div {
    background-color: #f9f2f4;
    padding: 15px;
    margin-top: 15px;
}
.notwork p:first-child{color: red;}
.work p:nth-child(2){color: red;}
</style>

<div class="notwork">
    <span>第一个 p 应该是红色,但不是</span>
    <p>first p</p>
    <p>second p</p>
    <a>third a</a>
</div>
<div class="work">
    <span>第一个 p 应该是红色</span>
    <p>first p</p>
    <p>second p</p>
    <a>third a</a>
</div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注