CSS3知识点总结----结构选择器

最新推荐文章于 2022-07-31 23:32:07 发布

weixin_30699465

最新推荐文章于 2022-07-31 23:32:07 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/ldmblog/p/6274146.html

版权

1、E:nth-child(n) 表示E父元素中的第n个字节点,从前往后数

p:nth-child(1){background:red;}
p:nth-child(odd){background:yellow;}  /*匹配奇数行*/
p:nth-child(even){background:blue;}/*匹配偶数行*/
p:nth-child(2n-1){background:black;}  /*匹配奇数行*/
p:nth-child(3n){background:green;}

2、E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

p:nth-last-child(2n){background:red;}

3、E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
p:nth-of-type(2) 找p标签父级下的第二个p元素

4、E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

5、E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

p:empty{background:red;}



<body>
    <p></p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <p>p6</p>
</body>

6、E:first-child 表示E元素中的第一个子节点

7、E:last-child 表示E元素中的最后一个子节点

8、E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

9、E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

10、E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

11、E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E 注意：子节点不包含文本节点

注：该选择器从1开始

转载于:https://www.cnblogs.com/ldmblog/p/6274146.html

weixin_30699465

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3知识点总结----结构选择器

1、E:nth-child(n) 表示E父元素中的第n个字节点,从前往后数p:nth-child(1){background:red;}p:nth-child(odd){background:yellow;} /*匹配奇数行*/p:nth-child(even){background:blue;}/*匹配偶数行*/p:nth-child(2n-1){background:bl...
复制链接

扫一扫