1、选择器first-child、last-child、nth-child和nth-last-child
利用first-child、last-child、nth-child和nth-last-child能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或者第奇数个子元素进行样式的指定。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--first-child-->
<style>
li:first-child{
background-color: orange;
}
/*last-child */
li:last-child{
background-color: red;
}
/*nth-child(position)*/
li:nth-child(3){
background-color: aqua;
}
/*nth-last-child() 从下往上数*/
li:nth-last-child(2){
background-color: gold;
}
/*li:nth-last-child(odd) 给奇数加效果*/
/*li:nth-last-child(even) 给奇数加效果*/
</style>
</head>
<body>
<h2>列表</h2>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</body>
</html>
2、选择器nth-of-type和nth-last-of-type
在CSS3中，通过选择器nth-of-type和nth-last-of-type，来避免选择元素时，会把子元素的个数也计算在内。使用这两个选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*以下是连同父级标签和子元素一同计算了*/
/*h2:nth-child(odd){*/
/*background-color: gold;*/
/*}*/
h2:nth-of-type(even){
background-color: green;
}
</style>
</head>
<body>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
</body>
</html>
3、nth-child和only-child选择器
nth-child选择器：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
nth-child(n)
an+β
-->
<style>
li:nth-child(4n+1){
background-color: gold;
}
li:nth-child(4n+2){
background-color: darkgreen;
}
li:nth-child(4n+3){
background-color: red;
}
li:nth-child(4n){
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
only-child选择器：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*以下语句，列表1，2和3都会被改变颜色*/
/*li:nth-child(1){*/
/*background-color: aqua;*/
/*}*/
/*以下语句，只有列表1和2会被改变颜色*/
/*即只有1个子元素时，会起作用*/
li:only-child{
background-color: gold;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
</ul>
<ul>
<li>列表2</li>
</ul>
<ul>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
</html>