CSS 选择器参考手册

1、赵祥德 整理甘肃 酒泉 2016.09CSS3选择器参考手册目录CSS 选择器参考手册4CSS .class 选择器5CSS #id 选择器6CSS * 选择器7CSS element 选择器8CSS element,element 选择器8CSS element  element 选择器9CSS element>element 选择器9CSS element+element 选择器10CSS element+element 选择器11CS

2、S attribute 选择器11CSS attribute=value 选择器12CSS attribute=value 选择器12CSS attribute|=value 选择器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 选择器25CSS3 e

3、lement1element2 选择器25CSS3 attribute=value 选择器26CSS3 attribute$=value 选择器27CSS3 attribute*=value 选择器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(

4、) 选择器35CSS3 :last-child 选择器37CSS3 :root 选择器37CSS3 :empty 选择器38CSS3 :target 选择器38CSS3 :enabled 选择器39CSS3 :disabled 选择器40CSS3 :checked 选择器41CSS3 :not 选择器41CSS3 :selection 选择器42CSS 选择器参考手册我们会定期对 W3School 的 CSS 参考手册进行浏览器测试。CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器例子例子描述.ro选择 class="intro&

5、quot; 的所有元素。#id#firstname选择 id="firstname" 的所有元素。*选择所有元素。elementp选择所有 <p> 元素。element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。element elementdiv p选择 <div> 元素内部的所有 <p> 元素。element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。element+elementdiv+p选择紧接在

6、<div> 元素之后的所有 <p> 元素。attributetarget选择带有 target 属性所有元素。attribute=valuetarget=_blank选择 target="_blank" 的所有元素。attribute=valuetitle=flower选择 title 属性包含单词 "flower" 的所有元素。attribute|=valuelang|=en选择 lang 属性值以 "en" 开头的所有元素。:linka:link选择所有未被访问的链接。:visiteda:visited选择

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

8、<p> 元素的内容之后插入内容。:lang(language)p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。element1element2pul选择前面有 <p> 元素的每个 <ul> 元素。attribute=valueasrc="https"选择其 src 属性值以 "https" 开头的每个 <a> 元素。attribute$=valueasrc$=".pdf"选择其 src 属性以 ".pdf&

9、quot; 结尾的所有 <a> 元素。attribute*=valueasrc*="abc"选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素

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

11、是从最后一个子元素开始计数。:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。:root:root选择文档的根元素。:emptyp:empty选择没有子元素的每个 <p> 元素（包括文本节点）。:target#news:target选择当前活动的 #news 元素。:enabledinput:enabled选择每个启用的 <input> 元素。:disabledinput:disabled选择每个禁用的 <input> 元素:checkedinput:checked选择每个被选中的 <input

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

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

14、选取 <div> 元素内部的所有元素：div * background-color:yellow;CSS element 选择器实例选择并设置所有 <p> 元素的样式：p background-color:yellow;浏览器支持所有主流浏览器都支持 element 选择器。定义和用法element 选择器用于指定元素名称的所有元素。CSS element,element 选择器实例选择并设置所有 <h1> 样式和所有 <p> 元素的样式：h1,p background-col

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

16、ment element 选择器用于选取元素内部的元素。CSS element>element 选择器实例选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：div>p background-color:yellow;浏览器支持所有主流浏览器都支持 element>element 选择器。注释：对于 IE8 及更早版本的浏览器中的 element>element，必须声明 <!DOCTYPE>。定义和用法element>element

17、 选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。CSS element+element 选择器实例选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色：div+p background-color:yellow;浏览器支持所有主流浏览器都支持 element+element 选择器。注释：对于 IE8 及更早版本的浏览器中的 element+element，必须声明 <!DOCTYPE>。定义和用法element+element

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

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

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

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

22、声明 <!DOCTYPE>。定义和用法attribute|=value 选择器用于选取带有以指定值开头的属性值的元素。注释：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。亲自试一试 - 实例选择其 class 属性值以 "top" 开头的元素，并设置其样式：class|=top background-color:yellow;CSS :link 选择器实例选择未被访问的链接，并设置其样式：a:link background-color:yellow;浏览器支持所

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

24、为链接设置不同的样式：a.ex1:hover,a.ex1:active color:red;a.ex2:hover,a.ex2:active font-size:150%;CSS :visited 选择器实例选择已访问的链接，并设置其样式：a:visited background-color:yellow;浏览器支持所有主流浏览器都支持 :visited 选择器。定义和用法:visited 选择器用于选取已被访问的链接。提示：请使用 :link 选择器对指向未被访问页面的链接设置样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式，:acti

25、ve选择器用于设置点击链接时的样式。亲自试一试 - 实例例子 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 :active 选择器实例选择活动链接，并设置其样式：a:active background-color:yellow;浏览器支持所有主

26、流浏览器都支持 :active 选择器。定义和用法:active 选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。提示：请使用 :link 选择器对指向未被访问页面的链接设置样式，:visited 用于设置指向已访问页面的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式。亲自试一试 - 实例例子 1选择未访问、已访问、悬浮和活动链接，并设置它们的样式：a:link color:blue;a:visited color:blue;a:hover color:red;a:active color:yellow;

27、例子 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;浏览器支持所有主流浏览器都支持 :hover 选择器。定义和用法:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设

28、置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。亲自试一试 - 实例例子 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-s

29、ize:150%;CSS :focus 选择器实例选择获得焦点的输入字段，并设置其样式：input:focus background-color:yellow;浏览器支持所有主流浏览器都支持 :focus 选择器。注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。定义和用法:focus 选择器用于选取获得焦点的元素。提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。CSS :first-letter 选择器实例选择每个 <p> 元素的首字母，并为其设置样式：p:first-letter font-size:200%;color

30、:#8A2BE2;浏览器支持所有主流浏览器都支持 :first-letter 选择器。定义和用法:first-letter 选择器用于选取指定选择器的首字母。注释：以下属性可与 :first-letter 使用：· 字体属性· 颜色属性· 背景属性· 外边距属性· 内边距属性· 边框属性· text-decoration· vertical-align（只有在 float 为 'none' 时）· text-transform· line-height· float&#

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

32、ign· text-transform· line-height· clearCSS :first-child 选择器实例选择属于其父元素的首个子元素的每个 <p> 元素，并为其设置样式：p:first-child background-color:yellow;浏览器支持所有主流浏览器都支持 :first-child 选择器。注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。定义和用法:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。亲自试一试 -

33、实例例子 1选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素：p:first-child ibackground:yellow;例子 2选择列表中的第一个 <li> 元素并设置其样式：li:first-childbackground:yellow;例子 3设置每个 <ul> 的首个子元素，并设置其样式：ul>:first-childbackground:yellow;CSS :before 选择器实例在每个 <p> 元素的内容之前插入新内容：p:before cont

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

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

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

37、s"。CSS3 element1element2 选择器实例为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：pulbackground:#ff0000;浏览器支持所有主流浏览器都支持 element1element2 选择器。注释：对于 IE8 中的该选择器，必须声明 <!DOCTYPE>。定义和用法element1element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 

38、不必直接紧随 element1。CSS3 attribute=value 选择器实例设置 class 属性值以 "test" 开头的所有 div 元素的背景色：divclass="test"background:#ffff00;浏览器支持所有主流浏览器都支持 attribute=value 选择器。注释：对于 IE8 及更早版本中的 attribute=value，必须声明 <!DOCTYPE>。定义和用法attribute=value 选择器匹配属性值以指定值开头的每个元素。亲自试一试 - 实例设置 class 属性值以

39、 "test" 开头的所有元素的背景色：class="test"background:#ffff00;CSS3 attribute$=value 选择器实例设置 class 属性值以 "test" 结尾的所有 div 元素的背景色：divclass$="test"background:#ffff00;浏览器支持所有主流浏览器都支持 attribute$=value 选择器。注释：对于 IE8 及更早版本中的 attribute$=value，必须声明 <!DOCTYPE>。定义和用法attri

40、bute$=value 选择器匹配属性值以指定值结尾的每个元素。亲自试一试 - 实例设置 class 属性值以 "test" 结尾的所有元素的背景色：class$="test"background:#ffff00;CSS3 attribute*=value 选择器实例设置 class 属性值包含 "test" 的所有 div 元素的背景色：divclass*="test"background:#ffff00;浏览器支持所有主流浏览器都支持 attribute*=value 选择器。注释：对于 IE8 及更早版本中的

41、 attribute*=value，必须声明 <!DOCTYPE>。定义和用法attribute*=value 选择器匹配属性值包含指定值的每个元素。亲自试一试 - 实例设置 class 属性值包含 "test" 的所有元素的背景色：class*="test"background:#ffff00;CSS3 :first-of-type 选择器实例指定父元素的首个 p 元素的背景色：p:first-of-typebackground:#ff0000;浏览器支持所有主流浏览器均支持 :first-of-type 选择器，除了 IE8 及

42、更早的版本。定义和用法:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提示：等同于 :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 选择

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

44、匹配属于其父元素的唯一子元素的每个元素。CSS3 :nth-child() 选择器实例规定属于其父元素的第二个子元素的每个 p 的背景色：p:nth-child(2)background:#ff0000;浏览器支持所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。亲自试一试 - 实例实例 1Odd 和 eve

45、n 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：p:nth-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() 选择器实例规定属于其父

46、元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数：p:nth-last-child(2)background:#ff0000;浏览器支持所有主流浏览器均支持 :nth-last-child() 选择器，除了 IE8 及更早的版本。定义和用法:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。提示：请参阅 :nth-last-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素，从最后一个子元素开始计数。亲自试一试 - 实例实

47、例 1Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色，从最后一个子元素开始计数：p:nth-last-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)

48、background:#ff0000;CSS3 :nth-of-type() 选择器实例规定属于其父元素的第二个 p 元素的每个 p：p:nth-of-type(2)background:#ff0000;浏览器支持所有主流浏览器均支持 :nth-of-type() 选择器，除了 IE8 及更早的版本。定义和用法:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。提示：请参阅 :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。亲自试一试 - 实例实例 1Odd 和

49、 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：p:nth-of-type(odd)background:#ff0000;p:nth-of-type(even)background:#0000ff;实例 2使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：p:nth-of-type(3n+0)background:#ff0000;CSS3 :nth-last-of-type()

50、 选择器实例规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数：p:nth-last-of-type(2)background:#ff0000;浏览器支持所有主流浏览器均支持 :nth-last-of-type() 选择器，除了 IE8 及更早的版本。定义和用法:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。n 可以是数字、关键词或公式。提示：请参阅 :nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计

51、数。亲自试一试 - 实例实例 1Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色，从最后一个子元素开始计数：p:nth-last-of-type(odd)background:#ff0000;p:nth-last-of-type(even)background:#0000ff;实例 2使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色，从最后一个子元素开始计数：p:nth-last-of-type(3n+0)background:#ff0000;CSS3 :last-child 选择器实例指定属于其父元素的最后一个子元素的 p 元素的背景色：p:last-child background:#ff0000;浏览器支持所有主流浏览器均支持 :last-child 选择器，除了 IE8 及更早的版本。定义和用法: