CSS3 知识量:11 - 43 - 138
HTML文档树也称为文档对象模型,即DOM。文档树是HTML页面的层次结构,有元素、属性和文本组成,它们又称为节点。
结构伪类选择器能够根据元素在文档树中的某些特性(如相对位置等)来定位它们。
结构伪类选择器有许多种,下面以表格的形式列出:
选择器 | 说明 |
---|---|
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 |
选择没有子元素的元素,且该元素也不包含任何文本节点。 |
结构伪类选择器中有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...个元素*/
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6