伪类中序选择器的理解

最新推荐文章于 2023-10-10 19:48:16 发布

枫叶在夏天

最新推荐文章于 2023-10-10 19:48:16 发布

阅读量192

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44552302/article/details/107605917

版权

最近复习基础，啃啃CSS权威指南，发现选择器相关知识点有些忽视和遗忘了，这里记录一下

1、伪类

:first-child，和 :first-of-type，

:last-child，和 :last-of-type

p:first-child
只选择是p标签且同层级中p为第一个时，才设置
p:first-of-type
选择同层级中所有p标签的第一个
last-child,last-of-type同理

child，孩子，所以先选出同层级的第几个，再判断是不是那个种类；of-type，种类，所以是同层级中同类型的第几个，其他的无视。

    <style type="text/css">
        p:first-child{
            color: red;
        }
        p:first-of-type{
            font-size: 30px;
        }
        p:last-child{
            color: green;
        }
        p:last-of-type{
            font-size: 5px;
        }
    </style>
</head>
<body>
    <div>第一层级的div</div>
    <p>第一层级的p1</p>
    <p>第一层级的p2</p>
    <div>
        <p>第二层级的p1</p>
        <p>第二层级的p2</p>
    </div>
</body>

在这里插入图片描述