CSS 子节点选择器

浏览数：105 / 时间：2015年06月09日

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">
li:nth-child(4n+1) {
    background-color: yellow;
}
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>