***

后代选择器的使用

/* 标准分页 */

div.pagination {  width: 600px;  margin: 10px auto;  padding-bottom: 20px; }

div.pagination ul {  display: inline-block;  font-size: 0;  margin: 0;  padding: 0; } div.pagination ul li {  float: left;  margin: 0 -1px; } div.pagination ul li a {  display: inline-block;  padding: 4px 12px;  font-size: 14px;  line-height: 20px;  border: 1px #62D5F7 solid;  border-left: 0; }

div.pagination ul li:first-child a {  border-left: 1px #62D5F7 solid;  border-radius: 4px 0 0 4px; } div.pagination ul li:last-child a {  border-radius: 0 4px 4px 0; }

<!-- 分页 -->
<div class="pagination">
 <ul>
  <li><a href="http://www.mamicode.com/#" class="pre">前一页</a></li>
  <li><a href="http://www.mamicode.com/#">1</a></li>
  <li><a href="http://www.mamicode.com/#">2</a></li>
  <li><a href="http://www.mamicode.com/#">3</a></li>
  <li><a href="http://www.mamicode.com/#">4</a></li>
  <li><a href="http://www.mamicode.com/#">5</a></li>
  <li><a href="http://www.mamicode.com/#">6</a></li>
  <li><a href="http://www.mamicode.com/#">7</a></li>
  <li><a href="http://www.mamicode.com/#">8</a></li>
  <li><a href="http://www.mamicode.com/#" class="next">后一页</a></li>
 </ul>
</div>

******

CSS3中的后代选择器就异常丰富了，有：first-child , last-child , nth-child(n)  , only-child , nth-last-child , empty , root，这里我按照使用频率来排列他们，靠前的使用频率很高，靠后的比如 root和empty使用的场合就很少。

好吧，下面一个一个详细解释。（解释图中的所有元素都是div元素）

⒈first-child (last-child)

选择每一个div元素的第一个子div元素。如下图所示：

⒉nth-child(n)，n可以为具体数字，表达式以及关键字odd,even

注：nth-child(0)不存在。

⒊ele:only-child：匹配属于父元素中唯一的ele元素

标准分页