***

后代选择器的使用

 

/* 标准分页 */

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="#" class="pre">前一页</a></li>

  <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="#" 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)

1	div:first-child{}

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

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

1 2 3 4 5 6

div:nth-child( 1 ) /*第一个子元素*/ div:nth-child( 2 ) /*第二个子元素*/ div:nth-child( 2 n+ 1 ) /*n=0开始，第1、3、5、7……个子元素*/ div:nth-child( 2 n) /*n=1开始，第2、4、6、8……个子元素*/ div:nth-child(odd) /*奇数子元素*/ div:nth-child(even) /*偶数子元素*/

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

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