CSS：伪类选择器

最新推荐文章于 2022-10-11 19:18:40 发布

lambda啊

最新推荐文章于 2022-10-11 19:18:40 发布

阅读量1.8k

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_54197911/article/details/124555482

版权

1.first-child:选择父类元素下第一个子元素。

代码如下（第一种情况p:first-child）

<body>
    <div class="out">
        <ul class="list">
            <p>hello</p>
            <p>word</p>
            <li>
                <div class="inner">
                    <p>wo</p>
                    <p>wo2</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <p>ni</p>
                </div>
            </li>
            <li>
                <div class="inner">
                    <p>ta</p>
                </div>
            </li>
        </ul>
    </div>
</body>

<style>
        p:first-child{
            background-color:yellowgreen;
        }
        .inner{
            border: 2px solid red;
            margin: 2px;
        }
        p{
            border: 2px solid rgb(106, 82, 229);
            margin: 2px;
        }
    </style>

结果：

原因如下：p:first-child会选中在同一个父类元素下的第一个p元素。

p元素hello与word是在同一个父元素ul下的；

p元素wo与wo2是在同一个父类元素div下；

p元素ni是在另外一个父元素div下；

p元素ta也是在另外一个父元素为div下；

而这时只会选择同一个父元素下的第一个p元素，因此hello与word只会选择hello，而wo与wo2会选择wo，其他两个都是在各自的父元素div中的唯一子元素，因此，ni和ta也被旋转。结果如图所示。

第二种情况(div>p:first-child)

<style>
        div>p:first-child{
            background-color:yellowgreen;
        }
        .inner{
            border: 2px solid red;
            margin: 2px;
        }
        p{
            border: 2px solid rgb(106, 82, 229);
            margin: 2px;
        }
    </style>

结果如下：

原因如下：div>p:first-child会选中父类元素为div下的第一个子元素为p的元素。因此只需要找到子元素为p元素，而且父类元素为div的p元素将其挑选出来。

p元素hello与word的父元素是ul，不是div，不被选中；

p元素wo与wo2的父元素是同一个div；

p元素ni，ta各自的父元素都是div（不是同一个div）；

因此，只有wo，ni，ta被选中。

第三种情况(ul p:first-child)

<style>
        ul p:first-child{
            background-color:yellowgreen;
        }
        .inner{
            border: 2px solid red;
            margin: 2px;
        }
        p{
            border: 2px solid rgb(106, 82, 229);
            margin: 2px;
        }
    </style>

结果如下：

原因如下：ul p:first-child会选中祖先元素为ul下的第一个后代元素为p的元素。

p元素hello与word的祖先元素为ul；它俩的父元素为同一个ul；（ul即是它俩的祖先元素也是父元素）

p元素wo与wo2的祖先元素为ul；它俩的父元素为第一个div.inner；

p元素ni的祖先元素为ul；其父元素为第二个div.inner；

p元素ta的祖先元素为ul；其父元素为第三个div.inner；

因此，只有hello，wo，ni，ta这四个p元素被选中。

总结：无论是这三种的哪一种情况，首先将满足条件的元素筛选下来，第二步则是找到每一个元素的父元素，最后才是看其是各自父元素下的第几个子元素。

lambda啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：伪类选择器

1.first-child:选择父类元素下第一个子元素。代码如下（第一种情况p:first-child）<body> <div class="out"> <ul class="list"> <p>hello</p> <p>word</p> <li> <div class=
复制链接

扫一扫