CSS选择器参考手册.docx

《CSS选择器参考手册.docx》由会员分享，可在线阅读，更多相关《CSS选择器参考手册.docx（38页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、CSS选择器参考手册赵祥德 整理 2016.09CSS3选择器参考手册目录CSS 选择器参考手册4CSS .class选择器5CSS #id选择器6CSS * 选择器7CSSelement选择器8CSSelement,element选择器8CSSelement element选择器9CSSelementelement选择器9CSSelement+element选择器10CSSelement+element选择器11CSS attribute 选择器11CSS attribute=value 选择器12CSS attribute=value 选择器12CSS attribute|=value 选

2、择器13CSS :link 选择器14CSS :visited 选择器15CSS :active 选择器16CSS :hover 选择器18CSS :focus 选择器19CSS :first-letter 选择器19CSS :first-line 选择器20CSS :first-child 选择器21CSS :before 选择器23CSS :after 选择器24CSS :lang 选择器25CSS3element1element2选择器25CSS3 attribute=value 选择器26CSS3 attribute$=value 选择器27CSS3 attribute*=value

3、选择器27CSS3 :first-of-type 选择器28CSS3 :last-of-type 选择器29CSS3 :only-of-type 选择器30CSS3 :only-child 选择器30CSS3 :nth-child() 选择器31CSS3 :nth-last-child() 选择器32CSS3 :nth-of-type() 选择器34CSS3 :nth-last-of-type() 选择器35CSS3 :last-child 选择器37CSS3 :root 选择器37CSS3 :empty 选择器38CSS3 :target 选择器38CSS3 :enabled 选择器39CS

4、S3 :disabled 选择器40CSS3 :checked 选择器41CSS3 :not 选择器41CSS3 :selection 选择器42CSS 选择器参考手册我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器例子例子描述.class.intro选择 class=intro 的所有元素。#id#firstname选择 id=firstname 的所有元素。*选择所有元素。elementp选择所有 元素。element,elementdiv,p选择所有 元素和所有 元素。elemente

5、lementdiv p选择 元素内部的所有 元素。elementelementdivp选择父元素为 元素的所有 元素。element+elementdiv+p选择紧接在 元素之后的所有 元素。attributetarget选择带有 target 属性所有元素。attribute=valuetarget=_blank选择 target=_blank 的所有元素。attribute=valuetitle=flower选择 title 属性包含单词 flower 的所有元素。attribute|=valuelang|=en选择 lang 属性值以 en 开头的所有元素。:linka:link选择所有

6、未被访问的链接。:visiteda:visited选择所有已被访问的链接。:activea:active选择活动链接。:hovera:hover选择鼠标指针位于其上的链接。:focusinput:focus选择获得焦点的 input 元素。:first-letterp:first-letter选择每个 元素的首字母。:first-linep:first-line选择每个 元素的首行。:first-childp:first-child选择属于父元素的第一个子元素的每个 元素。:beforep:before在每个 元素的内容之前插入内容。:afterp:after在每个 元素的内容之后插入内容。:

7、lang(language)p:lang(it)选择带有以 it 开头的 lang 属性值的每个 元素。element1element2pul选择前面有 元素的每个 元素。attribute=valueasrc=https选择其 src 属性值以 https 开头的每个 元素。attribute$=valueasrc$=.pdf选择其 src 属性以 .pdf 结尾的所有 元素。attribute*=valueasrc*=abc选择其 src 属性中包含 abc 子串的每个 元素。:first-of-typep:first-of-type选择属于其父元素的首个 元素的每个 元素。:last-o

8、f-typep:last-of-type选择属于其父元素的最后 元素的每个 元素。:only-of-typep:only-of-type选择属于其父元素唯一的 元素的每个 元素。:only-childp:only-child选择属于其父元素的唯一子元素的每个 元素。:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 元素。:nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 元素的每个 元素。:nth-last-of-

9、type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。:last-childp:last-child选择属于其父元素最后一个子元素每个 元素。:root:root选择文档的根元素。:emptyp:empty选择没有子元素的每个 元素（包括文本节点）。:target#news:target选择当前活动的 #news 元素。:enabledinput:enabled选择每个启用的 元素。:disabledinput:disabled选择每个禁用的 元素:checkedinput:checked选择每个被选中的 元素。:not(selector):not(p)选

10、择非 元素的每个元素。:selection:selection选择被用户选取的元素部分。CSS .class选择器CSS 选择器参考手册实例选择并设置 class=intro 的元素的样式：.intro background-color:yellow;浏览器支持所有主流浏览器都支持 .class 选择器。定义和用法.class 选择器选取带有指定类 (class) 的元素。亲自试一试 - 实例为 class=hometown 的所有 元素设置样式：p.hometown background-color:yellow;CSS #id选择器实例为 id=firstname 的元素设置样式：#fir

11、stname background-color:yellow;浏览器支持所有主流浏览器都支持 #id 选择器。定义和用法#id 选择器为带有指定 id 的元素设置样式。CSS * 选择器实例选择所有元素，并设置它们的背景色：* background-color:yellow;浏览器支持所有主流浏览器都支持 #id 选择器。定义和用法* 选择器选取所有元素。* 选择器也能选取另一个元素中的所有元素：实例选取 元素内部的所有元素：div * background-color:yellow;CSSelement选择器实例选择并设置所有 元素的样式：p background-color:yellow;

12、浏览器支持所有主流浏览器都支持element选择器。定义和用法element选择器用于指定元素名称的所有元素。CSSelement,element选择器实例选择并设置所有 样式和所有 元素的样式：h1,p background-color:yellow;浏览器支持所有主流浏览器都支持element,element选择器。定义和用法element,element选择器用于用于同时选取多个元素。如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。CSSelement element选择器实例选择并设置位于 元素内部的每个 元素的样式：div p background-color:yellow;

13、浏览器支持所有主流浏览器都支持elementelement选择器。定义和用法elementelement选择器用于选取元素内部的元素。CSSelementelement选择器实例选取父元素是 元素的每个 元素，并设置其背景色：divp background-color:yellow;浏览器支持所有主流浏览器都支持elementelement选择器。注释：对于 IE8 与更早版本的浏览器中的elementelement，必须声明。定义和用法elementelement选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。CSSelement+element选择器

14、实例选择 元素之后紧跟的每个 元素，并设置其背景色：div+p background-color:yellow;浏览器支持所有主流浏览器都支持element+element选择器。注释：对于 IE8 与更早版本的浏览器中的element+element，必须声明。定义和用法element+element选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSSelement+element选择器实例选择 元素之后紧跟的每个 元素，并设置其背景色：div+p background-color:yellow;浏览器支持所有主流浏览器都支持element+element选择器。注释：对于 IE

15、8 与更早版本的浏览器中的element+element，必须声明。定义和用法element+element选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSS attribute 选择器实例为带有 target 属性的 元素设置样式：atarget background-color:yellow;浏览器支持所有主流浏览器都支持 attribute 选择器。注释：对于 IE8 与更早版本的浏览器中的 attribute，必须声明。定义和用法attribute 选择器用于选取带有指定属性的元素。CSS attribute=value 选择器实例为 target=_blank 的 元素

16、设置样式：atarget=_blank background-color:yellow;浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对于 IE8 与更早版本的浏览器中的 attribute=value，必须声明。定义和用法attribute=value 选择器用于选取带有指定属性和值的元素。CSS attribute=value 选择器实例选择 titile 属性包含单词 flower 的元素，并设置其样式：title=flower background-color:yellow;浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对

17、于 IE8 与更早版本的浏览器中的 attribute=value，必须声明。定义和用法attribute=value 选择器用于选取属性值中包含指定词汇的元素。CSS attribute|=value 选择器实例选择 lang 属性值以 en 开头的元素，并设置其样式：lang|=en background-color:yellow;浏览器支持所有主流浏览器都支持 attribute|=value 选择器。注释：对于 IE8 与更早版本的浏览器中的 attribute|=value，必须声明。定义和用法attribute|=value 选择器用于选取带有以指定值开头的属性值的元素。注释：该值

18、必须是整个单词，比如 lang=en，或者后面跟着连字符，比如 lang=en-us。亲自试一试 - 实例选择其 class 属性值以 top 开头的元素，并设置其样式：class|=top background-color:yellow;CSS :link 选择器实例选择未被访问的链接，并设置其样式：a:link background-color:yellow;浏览器支持所有主流浏览器都支持 :link 选择器。定义和用法:link 选择器用于选取未被访问的链接。注释：:link 选择器不会设置已经访问过的链接的样式。提示：请使用:visited选择器对指向已访问页面的链接设置样式，:hov

19、er选择器用于设置鼠标指针浮动到链接上时的样式，:active选择器用于设置点击链接时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :visited 选择器实例选择已访问的链接，并设置其样式：a:visited

20、 background-color:yellow;浏览器支持所有主流浏览器都支持 :visited 选择器。定义和用法:visited 选择器用于选取已被访问的链接。提示：请使用:link选择器对指向未被访问页面的链接设置样式,:hover选择器用于设置鼠标指针浮动到链接上时的样式，:active选择器用于设置点击链接时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：

21、a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :active 选择器实例选择活动链接，并设置其样式：a:active background-color:yellow;浏览器支持所有主流浏览器都支持 :active 选择器。定义和用法:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。提示：请使用:link选择器对指向未被访问页面的链接设置样式，:visited用于设置指向已访问页面的链接的样式，:hover选择器用于设置鼠标指针浮动到链接上时的

22、样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :hover 选择器实例选择鼠标指针浮动在其上的元素，并设置其样式：a:hover background-color:yellow;浏览器支持所有主流浏览器都支持 :

23、hover 选择器。定义和用法:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。提示：:link选择器设置指向未被访问页面的链接的样式，:visited选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:re

24、d;a:active color:yellow;例子 2为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :focus 选择器实例选择获得焦点的输入字段，并设置其样式：input:focus background-color:yellow;浏览器支持所有主流浏览器都支持 :focus 选择器。注释：如果 :focus 用于 IE8 ，则必须声明 。定义和用法:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器

25、。CSS :first-letter 选择器实例选择每个 元素的首字母，并为其设置样式：p:first-letter font-size:200%;color:#8A2BE2;浏览器支持所有主流浏览器都支持 :first-letter 选择器。定义和用法:first-letter 选择器用于选取指定选择器的首字母。注释：以下属性可与 :first-letter 使用： 字体属性 颜色属性 背景属性 外边距属性 内边距属性 边框属性 text-decoration vertical-align（只有在 float 为 none 时） text-transform line-height floa

26、t clearCSS :first-line 选择器实例选择每个 元素的首行，并为其设置样式：p:first-line background-color:yellow;浏览器支持所有主流浏览器都支持 :first-line 选择器。定义和用法:first-line 选择器用于选取指定选择器的首行。注释：以下属性可与 :first-line 使用： 字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clearCSS :first-child 选择

27、器实例选择属于其父元素的首个子元素的每个 元素，并为其设置样式：p:first-child background-color:yellow;浏览器支持所有主流浏览器都支持 :first-child 选择器。注释：对于 IE8 与更早版本的浏览器中的 :first-child，必须声明。定义和用法:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。亲自试一试 - 实例例子 1选择每个 中的每个 元素并设置其样式，其中的 元素是其父元素的第一个子元素：p:first-child ibackground:yellow;例子 2选择列表中的第一个 元素并设置其样式：li:fi

28、rst-childbackground:yellow;例子 3设置每个 的首个子元素，并设置其样式：ul:first-childbackground:yellow;CSS :before 选择器实例在每个 元素的内容之前插入新内容：p:before content:台词：;浏览器支持所有主流浏览器都支持 :before 选择器。注释：对于 IE8 与更早版本中的 :before，必须声明。定义和用法:before 选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容。亲自试一试 - 实例在每个 元素前面插入内容，并设置所插入内容的样式：p:before conte

29、nt:台词：-;background-color:yellow;color:red;font-weight:bold;CSS :after 选择器实例在每个 元素的内容之后插入新内容：p:after content:台词：;浏览器支持所有主流浏览器都支持 :after 选择器。注释：对于 IE8 与更早版本中的 :after，必须声明。定义和用法:after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。亲自试一试 - 实例在每个 元素后面插入内容，并设置所插入内容的样式：p:after content:台词：-;background-color:yell

30、ow;color:red;font-weight:bold;CSS :lang 选择器实例选择带有以 en 开头的 lang 属性值的每个 元素，并设置其样式：p:lang(en) background:yellow;浏览器支持所有主流浏览器都支持 :lang 选择器。注释：对于 IE8 中的 :lang，必须声明。定义和用法:lang 选择器用于选取带有以指定值开头的 lang 属性的元素。注释：该值必须是整个单词，即可是单独的，比如 lang=en，也可后跟连接符，比如 lang=en-us。CSS3element1element2选择器实例为所有相同的父元素中位于 p 元素之后的所有 u

31、l 元素设置背景：pulbackground:#ff0000;浏览器支持所有主流浏览器都支持element1element2选择器。注释：对于 IE8 中的该选择器，必须声明。定义和用法element1element2选择器element1之后出现的所有element2。两种元素必须拥有相同的父元素，但是element2不必直接紧随element1。CSS3 attribute=value 选择器实例设置 class 属性值以 test 开头的所有 div 元素的背景色：divclass=testbackground:#ffff00;浏览器支持所有主流浏览器都支持 attribute=valu

32、e 选择器。注释：对于 IE8 与更早版本中的 attribute=value，必须声明。定义和用法attribute=value 选择器匹配属性值以指定值开头的每个元素。亲自试一试 - 实例设置 class 属性值以 test 开头的所有元素的背景色：class=testbackground:#ffff00;CSS3 attribute$=value 选择器实例设置 class 属性值以 test 结尾的所有 div 元素的背景色：divclass$=testbackground:#ffff00;浏览器支持所有主流浏览器都支持 attribute$=value 选择器。注释：对于 IE8 与

33、更早版本中的 attribute$=value，必须声明。定义和用法attribute$=value 选择器匹配属性值以指定值结尾的每个元素。亲自试一试 - 实例设置 class 属性值以 test 结尾的所有元素的背景色：class$=testbackground:#ffff00;CSS3 attribute*=value 选择器实例设置 class 属性值包含 test 的所有 div 元素的背景色：divclass*=testbackground:#ffff00;浏览器支持所有主流浏览器都支持 attribute*=value 选择器。注释：对于 IE8 与更早版本中的 attribut

34、e*=value，必须声明。定义和用法attribute*=value 选择器匹配属性值包含指定值的每个元素。亲自试一试 - 实例设置 class 属性值包含 test 的所有元素的背景色：class*=testbackground:#ffff00;CSS3 :first-of-type 选择器实例指定父元素的首个 p 元素的背景色：p:first-of-typebackground:#ff0000;浏览器支持所有主流浏览器均支持 :first-of-type 选择器，除了 IE8 与更早的版本。定义和用法:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提

35、示：等同于 :nth-of-type(1)。CSS3 :last-of-type 选择器实例指定父元素的最后一个 p 元素的背景色：p:last-of-typebackground:#ff0000;浏览器支持所有主流浏览器均支持 :last-of-type 选择器，除了 IE8 与更早的版本。定义和用法:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。提示：等同于 :nth-last-of-type(1)。CSS3 :only-of-type 选择器实例指定属于父元素的特定类型的唯一子元素的每个 p 元素：p:only-of-typebackground:

36、#ff0000;浏览器支持所有主流浏览器均支持 :only-of-type 选择器，除了 IE8 与更早的版本。定义和用法:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素。CSS3 :only-child 选择器实例规定属于其父元素的唯一子元素的每个 p 元素：p:only-childbackground:#ff0000;浏览器支持所有主流浏览器均支持 :only-child 选择器，除了 IE8 与更早的版本。定义和用法:only-child 选择器匹配属于其父元素的唯一子元素的每个元素。CSS3 :nth-child() 选择器实例规定属于其父元素的第二个

37、子元素的每个 p 的背景色：p:nth-child(2)background:#ff0000;浏览器支持所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 与更早的版本。定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n可以是数字、关键词或公式。提示：请参阅:nth-of-type()选择器，该选择器选取父元素的第 N 个指定类型的子元素。亲自试一试 - 实例实例 1Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：p:nth-

38、child(odd)background:#ff0000;p:nth-child(even)background:#0000ff;实例 2使用公式 (an+b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：p:nth-child(3n+0)background:#ff0000;CSS3 :nth-last-child() 选择器实例规定属于其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数：p:nth-last-child(2)background:#ff0000;浏览器支持所有主流浏览器均支持

39、:nth-last-child() 选择器，除了 IE8 与更早的版本。定义和用法:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式。提示：请参阅:nth-last-of-type()选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。亲自试一试 - 实例实例 1Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色，从最后一个子元素开始计数：p:nth-last-

40、child(odd)background:#ff0000;p:nth-last-child(even)background:#0000ff;实例 2使用公式 (an+b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色，从最后一个子元素开始计数：p:nth-last-child(3n+0)background:#ff0000;CSS3 :nth-of-type() 选择器实例规定属于其父元素的第二个 p 元素的每个 p：p:nth-of-type(2)background:#ff0000;浏览器支持所有主流浏览器均

41、支持 :nth-of-type() 选择器，除了 IE8 与更早的版本。定义和用法:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n可以是数字、关键词或公式。提示：请参阅:nth-child()选择器，该选择器选取父元素的第 N 个子元素，与类型无关。亲自试一试 - 实例实例 1Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：p:nth-of-type(odd)background:#ff0000;p:nth-of-type(even)background:#0000ff;实例