请稍等 ...

:first-child伪类选择器的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        p:first-child{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>aa</li>
        <li>aa</li>
        <li>aa</li>
    </ul>
    <p>b</p>
    <p>c</p>
    <p>d</p>
</body>
</html>

上面这段代码我在浏览器执行的时候发现第一个p标签没有效果，当我把三个p标签全部移到ul标签上方的时候，第一个p标签有效果了，这是为什么？百思不得其解！

慕前端03542954 2020-03-12 18:16:28

源自：3-2 选择器（2）

534

收起

提交取消

1回答

上海小西瓜回答被采纳获得+3积分 2020-03-18 15:28:08

因为放下面的话，p标签不是firstchild。

你把ul换成一个br标签也是一样的，只要p不是他爸爸的firstchild就不生效。

:nth-child也是同理，要看他自己是他爸爸的第几个孩子。

1 回复有任何疑惑可以回复我~

收起回答

提问者慕前端03542954 #1
```
非常感谢！
```
回复有任何疑惑可以回复我~ 2020-03-18 22:55:42
提问者慕前端03542954 #2
```
好像是这样的，我对:first-child以及:nth-child(n)的理解有问题
```
回复有任何疑惑可以回复我~ 2020-03-18 22:56:37