好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css3选择器(二)_html/css_WEB-ITnose

接css3选择器(一)

八、结构性伪类选择器【:nth-child(n)】

:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样。

其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd【奇数】、even【偶数】),但是参数n的值起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

Note: 当“:nth-child(n)”选择器中的n为一个 表达式 时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。如下表所示:

所以要达到斑马线的效果就非常容易了。

偶数行变橙色,ol >li:nth-child(2n|even){background:orange};

奇数行变绿色,ol > li:nth-child(2n+1|2n-1|odd){background: green;}

九、 结构性伪类选择器【:nth-last-child(n)】

:nth-last-child(n)和:nth-child(n)相似,但是多了个last,这个last代表从后向前,其他地方没差别。

举例:设置列表中倒数第五个列表项背景色为橙色。

     ol > li:nth-last-child(5){  background: orange;}     item1    item2    item3    item4    item5    item6    item7    item8    item9    item10   

十、【:first-of-type】选择器

:first-of-type选择器类似于:first-child选择器,不同之处是 指定了元素的类型 ,主要用于定位一个父元素下的某个类型的第一个子元素。

个人觉得这个:first-of-child是对:first-child的细分,锦上添花。

举个例子:给div容器中第一个p元素设置样式。

         选择器    /*p元素的父元素的第一个子元素是div而不是p元素,因此该样式不起作用*/ p:first-child{ color: red; } /*此时不用first-of-type,更待何时*/ p:first-of-type{ color: blue; }       

第一个子元素是div元素

查看更多关于css3选择器(二)_html/css_WEB-ITnose的详细内容...

  阅读:30次