介绍
伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等，这篇主要讲讲什么是结构伪类选择器。
| 选择器 | 功能描述 |
|---|---|
| :first-child | 选择父元素的第一个子元素 |
| :last-child | 选择父元素的最后一个子元素 |
| :nth-child(n) | 选择父元素的第n个子元素，表格隔行换色可写2n或2n+1,也可写odd或even，当然n可以为3n+2或其他任意表达式，且n的初始值为1不是0 |
| :nth-last-child(n) | 选择父元素的倒数第n个子元素，其余同上。 |
| :nth-of-type(n) | 选择该类型子元素中的第n个 |
| :nth-last-of-type(n) | 选择该类型子元素中倒数第n个 |
| :first-of-type | 选择该类型子元素中第1个 |
| :last-of-type | 选择该类型子元素中倒数第1个 |
| :only-child | 当父元素中只含有一个该类子元素时，选择该子元素 |
| :only-of-type | 选择父元素只包含一个同类型的子元素 |
| :empty | 选择没有子元素的元素，且该元素不包含任何文本节点。 |
浏览器支持：结构伪类选择器在所有版本的FF, Chrome，Safari，Opera，还有IE9及以上版本中支持。
代码
<html>
<head>
<title>CSS学习之路</title>
<meta http-equiv="Content-Type" content="text/html;" />
<meta charset="UTF-8">
<meta name="keywords" content="css 笔记" />
<meta name="description" content="shaoyuli的CSS3积累笔记" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.clearfix {
clear: both;
overflow: auto;
padding: 10px;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin:50px auto;
}
.demo li {
float: left;
list-style: none;
padding: 2px;
border: 1px solid #ccc;
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 50%;
background: #f36;
text-decoration: none;
}
.demo li:first-child {
background: #0f0;
}
/* 隔行换色 */
/* 偶数行 2n或odd */
.demo li:nth-child(2n) {
}
/* 奇数行 2n+1 或 even*/
.demo li:nth-child(2n+1) {
}
/* 隔三行换色用3n或3n+1即可 */
/* 选择倒数第三个元素 */
.demo li:nth-last-child(3) {
}
/* 选择同一类型的元素的第三个 */
.demo li:nth-of-type(3) {
}
/* 同理:first-of-type :last-of-child */
/* 只有一个元素的时候 */
.demo li:only-child {
background: skyblue;
}
</style>
</head>
<body>
<div class="demo clearfix">
<ul class="clearfix">
<p>0</p>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
<div class="demo clearfix">
<ul class="clearfix">
<li><a href="">2</a></li>
</ul>
</div>
</body>
</html>
