作者:梦魇漂鸟的心之一方老窝 | 来源:互联网 | 2023-05-17 14:18
***后代选择器的使用*标准分页*div.pagination{width:600px;margin:10pxauto;padding-bottom:20px;}div.pagin
***
后代选择器的使用
/* 标准分页 */
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; }
******
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
1
2
3
4
5
6
|
div:nth-child( 1 )
div:nth-child( 2 )
div:nth-child( 2 n+ 1 )
div:nth-child( 2 n)
div:nth-child(odd)
div:nth-child(even)
|
注:nth-child(0)不存在。
⒊ele:only-child:匹配属于父元素中唯一的ele元素
标准分页