伪类nth-child问题

发布于
2020-06-22

更新于
2020-06-22

新手上路，请多包涵

为什么下面:nth-child(1)和:nth-child(2)文字全红, 当:nth-child(3)开始就显示正常

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        :nth-child(1) {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>文字内容1</p>
        <p>文字内容2</p>
        <p>文字内容3</p>
        <p>文字内容4</p>
        <p>文字内容5</p>
        <p>文字内容6</p>
        <p>文字内容7</p>
        <p>文字内容8</p>
    </div>

    <strong>外层1</strong>
    <strong>外层2</strong>
    <strong>外层3</strong>
</body>
</html>

前端

阅读 2.1k

3 个回答

测试了一下，由于没有设置标签类型和color可继承
1的时候，div匹配该样式
2的时候，body匹配了该样式

然后去远足

43.1k103863

发布于
2020-06-22

更新于
2020-06-22

前面应该有个 * 的，你省略了，表示匹配任意元素。

document
  html // document:nth-child(1)
    head 
    body // html:nth-child(2)
      div // body:nth-child(1)
        p
        p
        p
      strong
      strong
      strong