从前端小白到大佬伪类选择器

最新推荐文章于 2021-08-24 22:48:14 发布

一只琳娜

最新推荐文章于 2021-08-24 22:48:14 发布

阅读量393

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my_prince/article/details/108782341

版权

css3 伪类选择器

写法格式
选择器：xxx {
}

常用

E:first-child	第一个孩子
E:last-child	最后一个孩子
E:nth-child(n)	第n个孩子（n可以是数字，可以是关键字如even偶数、odd奇数等，也可以是表达式，如2n，2n+1,-n+5（前五个）等）
E:last-of-type	最后一个孩子
E:first-of-type	第一个孩子
E:nth-of-type（n）	第n个孩子,与E:nth-child(n)相同

注意：
E:nth-child(n)与E:nth-of-type（n）是有区别的，E:nth-child(n)是同时确定选择器和n的，当两个条件冲突时，则不执行；E:nth-of-type（n）则是先确定选择器，在选中n，后执行结果。
例子：

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style>
        .diyi li:first-child {
            color: aquamarine;
        }
        
        .diyi li:last-child {
            color: blue;
        }
        
        .diyi li:nth-child(4) {
            color: brown;
        }
        /* 偶数行,可以写成表达式 2n */
        
        .dier li:nth-child(even) {
            background-color: rgb(127, 215, 218);
        }
        /* 奇数行,可以写成表达式 2n-1 */
        
        .dier li:nth-child(odd) {
            background-color: chocolate;
        }
        /* .disan的第一个孩子冲突并不是p标签，冲突，不执行 */
        
        .disan p:nth-child(1) {
            color: chocolate;
        }
        /* 先确定.disi中的p标签，在排序得到第一个孩子是sss，执行 */
        
        .disi p:nth-of-type(1) {
            color: chocolate;
        }
    </style>
</head>

<body>
    <ul class="diyi">
        <li>1孩子</li>
        <li>2孩子</li>
        <li>3孩子</li>
        <li>4孩子</li>
        <li>5孩子</li>
        <li>6孩子</li>
    </ul>
    <ul class="dier">
        <li>1孩子</li>
        <li>2孩子</li>
        <li>3孩子</li>
        <li>4孩子</li>
        <li>5孩子</li>
        <li>6孩子</li>
    </ul>
    <div class="disan">
        <span>xxx</span>
        <p>sss</p>
        <p>ccc</p>
    </div>
    <div class="disi">
        <span>xxx</span>
        <p>sss</p>
        <p>ccc</p>
    </div>
</body>

</html>

结果
在这里插入图片描述

一只琳娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到大佬伪类选择器

css3 伪类选择器写法格式选择器：xxx {}常用E:first-child第一个孩子E:last-child最后一个孩子E:nth-child(n)第n个孩子（n可以是数字，可以是关键字如even偶数、odd奇数等，也可以是表达式，如2n，2n+1,-n+5（前五个）等）E:last-of-type最后一个孩子E:first-of-type第一个孩子E:nth-of-type（n）第n个孩子,与E:nth-child(n)相同注意：
复制链接

扫一扫