CSS3 子节点选择器

最新推荐文章于 2024-01-29 20:45:26 发布

weixin_30662849

最新推荐文章于 2024-01-29 20:45:26 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/mafeifan/p/3592342.html

版权

CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。

这些新的样式已被现代浏览器及IE9以上支持。

选择器	说明
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(3)	第三个子元素
:nth-last-child(3)	倒数第三个子元素
:nth-child(odd)	所有奇数个子元素
:nth-child(even)	所有偶数个子元素
div h2:nth-of-type(even)	div 中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)
:nth-last-of-type	反过来计算
li:nth-child(4n+1)	循环样式匹配第1，5，9...个li
li:nth-child(4n+2)	循环样式匹配第2，6，10...个li
li:nth-child(4n+4)	可简写为 li:nth-child(4n)
ul li:first-child:last-child	是第一个也是最后一个，即匹配ul中只有一个li.
:only-child	上面的简写形式。匹配某个父元素只有一个子元素

h2:nth-child(3) 与 h2:nth-of-type(3) 的区别？

h2:nth-child(3) 指第三个子元素中正好是h2则应用该样式

h2:nth-of-type(3) 指所有的h2子元素的合集中，对第三个h2应用该样式

<style type="text/css">
    h2:nth-child(3){
        background-color:green;
    }

    h2:nth-of-type(3){
        background-color:#e00;
    }
</style>
</head>
<body>
<div>
<h2>文章标题A</h2>
<p>文章正文。</p>
<h2>文章标题B</h2>
<p>文章正文。</p>
<h2>文章标题C</h2>
<p>文章正文。</p>
<h2>文章标题D</h2>
<p>文章正文。</p>
</div>
</body>

结果：

循环样式的使用区别？

<style type="text/css">
/*对第1，5，9个li标签应用样式*/

li:nth-child(4n+1) {
    background-color: yellow;
}
/*对第2，6，10个li标签应用样式*/

li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n) {
    background-color: #999;
}
</style>
</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>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
</body>

效果：

:nth-child(1) 　　等价于 :first-child

:nth-last-child(1) 　　等价于 :last-child

:first-child:last-child 等价于 :only-child

转载于:https://www.cnblogs.com/mafeifan/p/3592342.html

weixin_30662849

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 子节点选择器

CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。这些新的样式已被现代浏览器及IE9以上支持。选择器说明:first-child第一个子元素:last-child最后一个子元素:nth-child(3)第三个子...
复制链接

扫一扫