CSS之选择器(5)

最新推荐文章于 2023-06-22 15:09:42 发布

极客研究者

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量217

点赞数

分类专栏： CSS样式表文章标签： css css3

本文链接：https://blog.csdn.net/qq_34550459/article/details/105567501

版权

CSS样式表专栏收录该内容

39 篇文章 0 订阅

订阅专栏

伪类选择器:

first-child:获取元素的第一个子元素
last-child:获取元素的最后一个子元素

nth-child(n):获取元素的第n个子元素(n从1开始)
特殊值:
n 第n个: n:1~正无穷大
2n或者even：表示选择偶数位的元素
2n+1或odd :表示选择奇数位的元素

first-of-type:选择一个上级元素下的第一个同类子元素；
last-of-type:择一个上级元素的最后一个同类子元素
nth-of-type(n):选择指定的元素

否定选择器（:not）
否定选择器 :not()，可以让你定位不匹配该选择器的元素。

::before和::after 伪类选择器:
:用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /*  
        功能与上面几个类似,不同点在于是在同类型元素中排序
        */
        /* ul>li:first-child{
            color: darkcyan;
        }

        ul>li:last-child{
        color: darkgoldenrod;
        }

        ul>li:nth-child(2){
            color: darksalmon;
        } */

        /* ul>li:first-of-type{
            color: darkturquoise;
        } */

        /* ul>li:last-of-type{
            color: deeppink;
        } */

        ul>li:nth-of-type(2){
            color: firebrick;
        }

    </style>
</head>
<body>
    <div>
        <ul>
            <!-- <h2>采桑子·十年尘土湖州梦</h2> -->
            <li>春宵一刻值千金,</li>
            <li>花有清香月有阴。</li>
            <li>歌管楼台声细细,</li>
            <li>秋千院落夜沉沉。</li>
        </ul>

    </div>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之选择器(5)

伪类选择器:first-child:获取元素的第一个子元素last-child:获取元素的最后一个子元素nth-child(n):获取元素的第n个子元素(n从1开始)特殊值:n 第n个: n:1~正无穷大2n或者even：表示选择偶数位的元素2n+1或odd :表示选择奇数位的元素first-of-type:选择一个上级元素下的第一个同类子元素；last-of-type:择一个上...
复制链接

扫一扫