伪类选择器汇总.docx

1、伪类选择器汇总1 lang 语言伪类选择符 E:lang() body background-color: deepskyblue; p:lang(zh-cn) color: #f00; 大段测试文字 2 lastchild 结构性伪类选择符 E:last-child body background-color: deepskyblue; h1 font-size: 16px; li:last-child color: #f00; 注意是li:last-child，而不是ul:last-child 结构性伪类选择符 E:last-child 结构性伪类选择符 E:last-child 结构性伪

2、类选择符 E:last-child 结构性伪类选择符 E:last-child 3 lastoftype 结构性伪类选择符 E:last-of-type body background-color: deepskyblue; p:last-of-type color: #f00; 我是一个div元素 我是一个p元素 我是一个p元素 4 left page:left body background-color: deepskyblue; page: left margin-left: 300px; div page-break-after: always; 页面容器位于装订线左边的所有页面左外边

3、距为300px 页面容器位于装订线左边的所有页面左外边距为300px 页面容器位于装订线左边的所有页面左外边距为300px 5 link 链接伪类选择符 E:link body background-color: deepskyblue; a:link color: #03c; .external:link color: #f00; 外部链接 内部链接 外部链接 内部链接 6 not 否定伪类选择符 E:not() body background-color: deepskyblue; p:not(.abc) color: #f00; 否定伪类选择符 E:not() 否定伪类选择符 E:not

4、() 否定伪类选择符 E:not() 否定伪类选择符 E:not() 7 nthchild 结构性伪类选择符 E:nth-child(n) body background-color: deepskyblue; h1 font-size: 16px; li:nth-child(2) color: #f00; 第二行要变成红色 li:nth-child(2)color:#f00; 结构性伪类选择符 E:nth-child(n) 结构性伪类选择符 E:nth-child(n) 结构性伪类选择符 E:nth-child(n) 8 nthlastchild 结构性伪类选择符 E:nth-last-ch

5、ild(n) body background-color: deepskyblue; h1 font-size: 16px; li:nth-last-child(1) color: #f00; 最后一行要变成红色 li:nth-last-child(1)color:#f00; 结构性伪类选择符 E:nth-last-child(n) 结构性伪类选择符 E:nth-last-child(n) 结构性伪类选择符 E:nth-last-child(n) 9 nthlastoftype 结构性伪类选择符 E:nth-last-of-type(n) body background-color: deep

6、skyblue; p:nth-last-of-type(1) color: #f00; 我是一个p元素 我是一个div元素 我是一个p元素 我是一个p元素 10 nthoftype 结构性伪类选择符 E:nth-of-type(n) body background-color: deepskyblue; p:nth-of-type(2) color: #f00; 我是一个p元素 我是一个div元素 我是一个p元素 我是一个p元素 11 onlychild 结构性伪类选择符 E:only-child body background-color: deepskyblue; h1 font-size

7、: 16px; li:only-child color: #f00; 只有唯一一个子元素 结构性伪类选择符 E:only-child 有多个子元素 结构性伪类选择符 E:only-child 结构性伪类选择符 E:only-child 结构性伪类选择符 E:only-child 12 onlyoftype 结构性伪类选择符 E:only-of-type p:only-of-type color: #f00; 结构性伪类选择符 E:only-of-type 13 right page:right body background-color: deepskyblue; page: right ma

8、rgin-right: 300px; div page-break-after: always; 有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px 有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px 有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px 14 root 结构性伪类选择符 E:root body background-color: deepskyblue; html:root color: #f00; 列表项一 列表项二 列表项三 15 target 目标伪类选择符 E:target body background

9、-color: deepskyblue; .test .hd padding: 10px 0; .test .bd .panel width: 500px; margin-top: 5px; border: 1px solid #ddd; .test .bd h2 border-bottom: 1px solid #ddd; .test .bd .panel:target border-color: #f60; .test .bd .panel:target h2 border-color: #f60; h2, p margin: 0; padding: 10px; font-size: 16px; 前往区块1 前往区块2 前往区块3 前往区块4 前往区块5 区块1 区块1内容 区块1内容 区块1内容 区块2 区块2内容 区块2内容 区块2内容 区块3 区块3内容 区块3内容 区块3内容 区块4 区块4内容 区块4内容 区块4内容 区块5 区块5内容 区块5内容 区块5内容 16 visited 链接伪类选择符 E:visited body background-color: deepskyblue; :link color: #03c; :visited color: #f00; 外部链接 a href= 外部链接 a href=