CSS3

CSS3 知识量:11 - 43 - 138

2.8 结构伪类选择器><

什么是结构伪类选择器- 2.8.1 -

HTML文档树也称为文档对象模型,即DOM。文档树是HTML页面的层次结构,有元素、属性和文本组成,它们又称为节点。

结构伪类选择器能够根据元素在文档树中的某些特性(如相对位置等)来定位它们。

结构伪类选择器的分类- 2.8.2 -

结构伪类选择器有许多种,下面以表格的形式列出:

选择器 说明
E:first-child 选择父元素的第一个子元素E。与E:nth-child(1)等效。
E:last-child 选择父元素的最后一个子元素E。与E:nth-last-child(1)等效。
E:root 选择匹配元素E所在文档的根元素。HTML中,根元素始终是html。
E F:nth-child(n) 选择父元素E的第n个子元素F。其中,n的起始值是1,不是0。
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素。
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素。
E:first-of-type 选择父元素内具有指定类型的第一个E元素。与E:nth-of-type(1)等效。
E:last-of-type 选择父元素内具有指定类型的最后一个E元素。与E:nth-last-of-type(1)等效。
E:only-child 选择父元素只包含一个子元素的E元素。
E:only-of-type 选择父元素只包含一个同类型子元素的E元素。
E:empty
选择没有子元素的元素,且该元素也不包含任何文本节点。

关于参数n- 2.8.3 -

结构伪类选择器中有4个含有参数n,参数n的取值可以有以下几种:

  • 整数。例如:1、2、3。

  • 关键字。例如:odd、even。

  • 公式。例如:n+2、2n+1。

具体来说有以下几种情况:

1、n为具体数值。可以是任何大于0的正整数。

:nth-child(5)  /*选择第5个元素*/

2、n为表达式“n*length”。即选择n的倍数的元素,其中n从0开始计算,length为大于0的整数。

:nth-child(2n)  /*选择第2、4、6、8...个元素*/

3、n为表达式“n+length”。即选择大于或等于length的元素。

:nth-child(n+2)  /*选择第2、3、4、5...个元素*/

4、n为表达式“-n+length”。即选择小于或等于length的元素。

:nth-child(-n+5)  /*选择第5、4、3、2、1个元素*/

5、n为表达式“n*length+b”。即选择n的倍数且再偏移b个元素的元素。

:nth-child(2n+1)  /*选择第1、3、5、7...个元素*/

6、n为关键字odd。即选择奇数元素。

:nth-child(odd)  /*选择第1、3、5、7...个元素*/

7、n为关键字even。即选择偶数元素。

:nth-child(even)  /*选择第2、4、6、8...个元素*/