Blog

CSS3结构性伪类选择器汇总

上篇博文中我们了解了四个基本的结构性伪类选择器,之所以单独列出去,也算是抛砖引玉吧,当作是对结构性伪类选择器的初步消化。其实换个角度,不要想的那么抽象,所谓“结构性”,那就从结构形式上来理解,加上这些选择器名称的语义,你会发现这些只是需要死记硬背的东西而已。下面开始罗列吧(为方便理解和记忆,我把有关联性的选择器给并在一起列出了): 1、:first-child选择器和:last-child选择器。 顾名思义,前者表示选择某类元素的第一个元素,后者表示选择某类元素的最后一个元素。 2、:nth-child选择器和:nth-last-child选择器。(* :nth-last-child与:nth-child用法相同,只不过是倒数元素而已,下面就以:nth-child来介绍。) 此选择器使我们可以选择某类元素列表的任何一个元素或一类元素,用法有三: (1).选择某一个指定元素: Element:nth-child(n)表示选择该数列的第n个元素; (2).此外,:nth-child还有个高级用法——筛选奇偶数列:< Element:nth-child(odd)表示选择该数列的所有奇数行; Element:nth-child(even)则表示选择该数列的所有偶数行。 (3).更高级的用法——以表达式代替n循环使用样式: :nth-child(i*n+x),其中1≤x≤i(i为非零正整数)。表示选择从第一个元素算起,每隔i个(包含第i个)的一系列数列。 3、:nth-of-type选择器和:nth-last-of-type选择器。(* :nth-last-of-type与:nth-of-type用法相同,只不过是倒数元素而已,下面就以:nth-of-type来介绍。) 这两个选择器与上面提出的两个奇偶数列选择器类似,不过在特殊情况下使用显得更精确一些。两者的区别在于,上者在计算该元素是奇数列or偶数列时,是连同与其共一父级元素的所有同级元素来计算的,而后者只针对同一类别的元素进行计算。如此来看,比如若是单纯的ul列表,判断li元素奇偶行,那么两者都适用;如果是dl列表,内含dt和dd两种元素,而只需选择dt奇偶列不同来定义样式,此时就只能用:nth-of-type选择器。语法同上。 4、:only-child选择器。 表示选择某元素所在的父级元素下其是单独存在的元素。 有了这些选择器,我们又省掉了很多JS了,真是太棒了。语法已经描述的比较到位了,我就不贴源码示例了,大家多动手,多实践,这样才更容易掌握哈。

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP