HTML5中CSS3的结构伪类选择器

最新推荐文章于 2024-07-16 21:31:13 发布

枕梦

最新推荐文章于 2024-07-16 21:31:13 发布

阅读量3.4k

点赞数 2

分类专栏： HTML5+CSS 文章标签：结构伪类选择器

本文链接：https://blog.csdn.net/qq_37768482/article/details/71480742

版权

HTML5+CSS 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CSS3结构伪类选择器：
1、E:nth-child(n)实现奇偶：
（li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
）
2、E:nth-last-child(n) { sRules }
（匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。）
3*、E:nth-of-type(n) { sRules }
（匹配同类型中的第n个同级兄弟元素E。）
4、E:first-child { sRules }
（匹配父元素的第一个子元素E。）
5、E:last-child { sRules }

（匹配父元素的最后一个子元素E。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        li:nth-child(2n-1){
            color: red;
        }
        li:nth-last-child(2){/*反向，倒数第二条*/
            color: yellow;
        }
        p:nth-of-type(2){
            color: red;
        }
    </style>
    <title>结构伪类选择器</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
    <li>列表项8</li>
</ul>

<div>
    <p>段落1</p>
    <div>伪段落</div>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</div>
</body>
</html>

枕梦

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5中CSS3的结构伪类选择器

HTML5中CSS3的结构伪类选择器1、E:nth-child(n)2、E:nth-last-child(n) { sRules }3*、E:nth-of-type(n) { sRules }4、E:first-child { sRules }5、E:last-child { sRules }
复制链接

扫一扫

专栏目录