CSS3教程

当前位置: HTML5技术网 > CSS3教程 > WEB前端使用的CSS3选择器

WEB前端使用的CSS3选择器

       首先说first-child与last-child,这两个选择器很容易明白,就是父元素下的第一个子元素和最后一个子元素。而nth-child和nth-last-child则是父元素下指定序号的子元素,甚至第偶数个、奇数个子元素精选样式的制定。
/*选择器写法示例*/
nth-child(n) //正数第n个子元素
nth-last-child(n) //倒数第n个子元素
nth-child(odd) //正数下来所有的第偶数个子元素
nth-last-child(even) //倒数上去的第奇数个子元素
        那么nth-of-type与nth-last-of-type呢?
        在一个div中有数篇文章,h2与p多次使用的情况要对h2实现奇偶异色,如果使用nth-child或是nth-last-child来实现就会发现一些问题(不提供demo代码,读者可自行编写h2ph2ph2p如此),试验的结果是没有出现奇偶异色,仅仅是奇数的变色了。
        这个问题产生的原因是,nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候,是连同父元素中的所有子元素一起计算的。换句话说,”h2:nth-child(odd)”这句话的含义,并不是指“针对div元素中第奇数个h2子元素来使用”,而是指“当div元素中的第奇数个子元素是h2子元素的时候使用。”(demo的话h2,p相互交错,h2都在奇数位置。)
        nth-of-type与nth-last-of-type可以避免这类问题的发生。使用这两个选择器的时候,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素的时候,就只针对同类型的子元素进行计算了。
/*选择器写法示例*/
h2:nth-of-type(odd) //第偶数个h2子元素
h2:nth-of-type(even) //第奇数个h2子元素
新增结构伪类选择器列表:
E:root:匹配E所在文档的根元素
E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
E:nth-last-child(n):匹配元素类型为E且是父元素的倒数第n个子元素(与上一项顺序相反)
E:nth-of-type(n):匹配父元素的第n个类型为E的子元素
E:nth-last-of-type(n):匹配父元素的倒数第n个类型为E的子元素(与上一项顺序相反)
E:first-of-type:匹配父元素的第一个类型为E的子元素
E:last-child:匹配元素类型为E且是父元素的最后一个子元素
E:last-of-type:匹配父元素的最后一个类型为E的子元素
E:only-child:匹配元素类型为E且是父元素中唯一的子元素
E:only-of-type:匹配父元素中唯一子元素是E的子元素
E:empty:匹配不包含子节点(包括文本)的E元素

【WEB前端使用的CSS3选择器】相关文章

1. WEB前端使用的CSS3选择器

2. 在IE中使用高级CSS3选择器

3. CSS3每日一练之选择器-结构性伪类选择器[三]

4. CSS3每日一练之选择器-结构性伪类选择器[二]

5. CSS3每日一练之选择器-兄弟元素选择器

6. CSS3每日一练之选择器-结构性伪类选择器[一]

7. CSS3每日一练之选择器-状态伪类选择器[五]

8. CSS3每日一练之选择器-属性选择器

9. CSS3每日一练之选择器-状态伪类选择器[四]

10. CSS3每日一练之选择器-状态伪类选择器[三]

本文来源:https://www.51html5.com/a1056.html

点击展开全部

﹝WEB前端使用的CSS3选择器﹞相关内容

「WEB前端使用的CSS3选择器」相关专题

其它栏目

也许您还喜欢