首页 > 代码库 > 标准分页

标准分页

***

后代选择器的使用

 

/* 标准分页 */

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)

1
div:first-child{}

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

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

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

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

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

 

标准分页