CSS选择器参考手册

书目

CSS选择器参考手册.....................................4

CSS（后ss选择器........................................5

CSS#0选择器..........................................6

CSS*选择器............................................7

CSSelement选择翳..........................................................................8

CSSelementelement.........................................................8

CSSelemente/e/7?e/7Z■选择器...........................9

CSSelement>element...............................................9

CSSelementselement......................................................10

CSSelementselement......................................................11

CSS[attribute选择器..................................11

CSS[attribute=value\选择器...........................12

CSS[attribute-=va!ue\选择器.........................12

CSS[attribute=i/a/t/e]选择器...........................13

CSSdink选择器........................................14

CSS:visited选择器.....................................15

CSS:active选择器.....................................16

CSS:hover选择器......................................17

CSS:focus选择器......................................19

CSSzfirst-letter选择器.................................19

CSS:first-line选择器...................................20

CSS:first-child选择器.................................21

CSS:before选择器....................................23

CSS:after选择器......................................23

CSSdang选择器......................................24

CSS3element2选碎器.....................25

CSS3[attribute^=value\选择器......................26

CSS3[attribute^-value\选择器.......................26

CSS3[attributed=valud\选择器.......................27

CSS3:first-of-type选择器............................28

CSS3:last-of-type选择器..............................29

CSS3:only-of-type选择器............................29

css选择器参考手册

我们会定期对W3School的CSS参考手册进行阅读器测试。

CSS3选择器

在CSS中，选择器是一种模式，用于选择须要添加样式的元素。

选择器例子例子描述

.class.intro选择class="intr。”的全部元素。

Miditfirstname选择id="firstname”的全部元素。

**选择全部元素。

elementP选择全部＜p＞元素。

clement,clcmontdiv,p选择全部＜div＞元素和全部＜p＞元素。

elementelementdivp选择＜div＞元素内部的全部＜p＞元素。

elemenC>elementdiv>p选择父元素为＜div＞元素的全部＜p＞元素。

elementselementdiv+p选择紧接在＜div＞元素之后的全部＜p＞元素。

[target]选择带有target属性全部元素。

\_attributesvalue}[targct=_blankj选择target="blank*的全部元素。

[attribut"lower]选择title属性包含单词"flower"的全部元素。

lattributekvaluH[lang|=en]选择lang属性值以"en”开头的全部元素。

:1inka:link选择全部未被访问的链接。

:visiledci:visited选择全部已被访问的链接。

:activea:active选择活动链接。

:hovera:hover选择鼠标指计位于其上的链接~

:「ocusinput:focus选择获得焦点的input元素。

:firstTcttcrp:first-letter选择每个＜P＞元素的首字母。

:firstTinep:first-line选择每个＜p＞元素的首行。

:first-chiIdp:first-child选择属于父元素的第一个子元素的每个＜p＞元素。

:beforep:before在每个＜p＞元素的内容之前插入内容。

:afterp:after在每个＜p＞兀索的内容之后捕入内容。

:lang(/a咐/age)p:lang(it)选择带有以"it"开头的lang属性值的每个卬＞元素。

element广element2p~ul选择前面有＜p＞元素的每个＜ul＞元素。

[attribu3:value]a[src"=*s"]选择其sre属性值以"s"开头的每个＜a＞元素。

lallribute$=value]a[src$=，/.pdf”]选择其sre属性以".pdf"结尾的全部＜a＞元素。

[attribute^uw/uo]a[src*=，/abc，/]选择其sre属性中包含"abc”子串的每个＜a＞元素。

:first-olypep:first-of-type选择属于其父元素的首个＜P＞元素的每个＜P＞元素。

:last-of-typep:last-of-type选择属于其父元素的最终＜p＞元素的每个＜p＞元素。

:only-of-typep:only-of-type选择属于其父元素唯一的＜P＞元素的每个＜P＞元素。

:only-chiIdp:only-chiId选择属于其父元素的唯一子元素的每个＜p＞元素。

:nth-child(/?)p:nth-chiId(2)选择属于其父元素的其次个子元素的每个＜P＞元素1）

:nthTast-child(〃)p:nth-last-chiId(2)同h,从最终一个子元素起先计数。

:nth-of-type(〃)p:nth-of-type(2)选择属于其父元素其次个＜P＞元素的每个＜P＞元素。

:nth-lasLof-type(p:nth-last-of-type(2)同上，但是从最终一个子元素起先计数。

立

:last-chiIdp:last-child选择属于其父元素最终一个子元素每个＜p＞元素。

:root:root选择文档的根元素。

:emplyp:empty选择没有子元素的每个＜p＞元素（包括文本节点）。

:target#ncws:target选择当前活动的#news元素。

:enab1edinput:enabled选择每个启用的＜input＞元素。

:disab1edinput:disabled选择每个禁用的＜input＞元素

:checkedinput:checked选择每个被选中的＜input＞兀索。

:nol(selects):not(p)选择非＜p＞元素的每个元素。

::selection::selection选择被用户选取的元素部分。

CSS.C后ss选择器

css选择器参考手册

实例

选择并设置class="intro”的元素的样式:

.intro

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持.class选择器。

定义和用法

.class选择器选取带有指定类(class)的元素。

亲自试一试•实例

为class=Hhometownn的全部＜p＞元素设置样式:

p.hometown

background-color:yellow;

)

CSS选择器

实例

为id="firstnameH的元素设置样式:

#firstname

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持#id选择器。

定义和用法

#id选择器为带有指定id的元素设置样式。

CSS*选择器

实例

选择全部元素，并设置它们的背景色：

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持#id选择器。

定义和用法

*选择器选取全部元素。

*选择器也能选取另一个元素中的全部元素;

实例

选取＜div＞元素内部的全部元素：

div*

{

background-color:yellow;

)

CSS选择器

实例

选择并设置全部vp＞元素的样式：

P

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持element选择器。

定义和用法

element选择器用于指定元素名称的全部元素。

CSSelement,element

实例

选择并设置全部vhl＞样式和全部vp＞元素的样式:

hl,P

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持element,element选择器。

定义和用法

element,element选择器用于用于同时选取多个元素。

如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。

CSSelemente/emeol选择器

实例

选择并设置位于＜div＞元素内部的每个＜p＞元素的样式：

divp

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持elementelement选择器。

定义和用法

elementelement选择器用于选取元素内部的元素。

CSSelement＞element

实例

选取父元素是<div>元素的每个<p>元素，并设置其背景色：

div>p

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持element>element选择器。

注释：对于IE8及更早版本的阅读器中的element>element,必需声

明v!DOCTYPE>°

定义和用法

element>element选择器用于选取带有特定父元素的元素。

注释：假如元素不是父元素的干脆子元素，则不会被选择。

CSSelementselement

实例

选择vdiv>元素之后紧跟的每个vp>元素，并设置其背景色：

div+p

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持element+element选择器。

注释：对于IE8及更早版本的阅读器中的e/ement+element,必需声

明v!DOCTYPE>.

定义和用法

element+element选择器用于选取第一个指定的元素之后（不是内部）

紧跟的元素。

CSSelementselement

实例

选嬖＜div＞元素之后紧跟的每个vp＞元素，并设置其背景色：

div+p

{

background-color:yellow;

）

阅读器支持

全部主流阅读器都支持element+element选择器。

注释：对于IE8及更早版本的阅读器中的element+element,必需声

明＜!DOCTYPE＞o

定义和用法

element+element选择器用于选取第一个指定的元素之后（不是内部）

紧跟的元素。

CSS[attribute选择器

实例

为带有target属性的va＞元素设置样式：

□[target]

{

background-color:yellow;

}

阅读器支持

全部主流阅读器都支持[attribute]选择器c

注释：对于IE8及更早版本的阅读器中的[attribute],必需声

明v!DOCTYPE>.

定义和用法

[attribute]选择器用于选取带有指定属性的元素。

CSS[attribute-value\选择器

实例

^target="blank"J^<a>元素设置样式：

a[target=_blank]

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持[atEbute=vaBe]选择器。

注释：对于IE8及更早版本的阅读器中的[dtEbute=vd/ue],必需声

明v!DOCTYPE>。

定义和用法

[attribute=value]选择器用于选取带有指定属性和值的元素。

CSS[attribute-=valued选择器

实例

选择titile属性包含单词“flower”的元素，并设置其样式：

[title^=flower]

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持[attribute~=va/ue]选择器。

注释：对于IE8及更早版本的阅读器中的[attribute~=va/ue],必需声

明v!DOCTYPE＞。

定义和用法

[attribute^=value]选择器用于选取属性值中包含指定词汇的元素。

CSS[attributevalue\选择器

实例

选择lang属性值以“e以开头的元素，并设置其样式：

[lang|=en]

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持出由选择器。

注释：对于IE8及更早版本的阅读器中的由《77加7/|=由胆8],必需声

明v!DOCTYPE＞。

定义和用法

[attribute\=value]选择器用于选取带有以指定值开头的属性值的元素。

注释：该值必需是整个单词，比如lang="enH,或者后面跟着连字符，比

如lang="en-us"o

亲自试一试・实例

选择其class属性值以"top"开头的元素，并设置其样式:

[class|=top]

(

background-color:yellow;

)

CSSJink选择器

实例

选择未被访问的链接，并设置其样式：

a:link

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持:link选择器。

定义和用法

:link选择器用于选取未被访问的链接。

注释：：link选择器不会设置已经访问过的链接的样式。

提示：请运用：visited选择器对指向已访问页面的链接设置样

式，:hover选择器用于设置鼠标指针浮动到链接上时的样式,:active选

择器用于设置点击链接时的样式。

亲自试一试•实例

例子1

选择未访问、已访问、悬浮和活动链接，并设置它们的样式:

a:link{color:blue;}

a:visited{color:blue;}

a:hover{color:red;}

a:active{color:yellow;}

例子2

为链接设置不同的样式：

a・exl:hover,a.exl:active{color:red;}

a,ex2:hover,a.ex2:active{font-size:150%;}

CSS:visited选择器

实例

选择已访问的链接，并设置其样式:

a:visited

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持:visited选择器。

定义和用法

:visited选择器用于选取已被访问的链接。

提示；请运用Jink选择器对指向未被访问页面的链接设置样

式，式。ver选择器用于设置鼠标指针浮动到链接上时的样式，:active选

择器用于设置点击链接时的样式。

亲自试一试・实例

例子1

选择未访问、已访问、悬浮和活动链接，并设置它们的样式:

a:link{color:blue;}

a:visited{color:blue;}

a:hover{color:red;}

a:active{color:yellow;}

例子2

为链接设置不同的样式：

a・exl:hover,a.exl:active{color:red;}

a,ex2:hover,a.ex2:active{font-size:150%;}

CSS:active选择器

实例

选择活动链接，并设置其样式:

a:active

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持:active选择器。

定义和用法

:active选择器用于选择活动链接。

当您在一个链接上点击时，它就会成为活动的（激活的）。

提示：请运用：link选择器对指向未被访问页面的链接设置样

式，:visited用于设置指向已访问页面的链接的样式，:hover选择器用于

设置鼠标指针浮动到链接上时的样式。

亲自试一试•实例

例子1

选择木访问、已访问、悬浮和活动链接，并设置它们的样式:

a:link{color:blue;}

a:visited(color:blue;}

a:hover{color:red;}

a:active(color:yellow;}

例子2

为链接设置不同的样式：

a・exl:hover,a,exl:active{color:red;}

a.ex2:hover,a.ex2:active{font-size:150%;}

CSS:hover选择器

实例

选择鼠标指针浮动在其上的元素，并设置其样式:

a:hover

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持:hover选择器。

定义和用法

：hover选择器用于选择鼠标指针浮动在上面的元素。

提示：：hover选择器可用于仝部元素，不只是链接。

提示link选择器设置指向未被访问页面的链接的样式，:visited选择器

用于设置指向已被访问的页面的链接，:active选择器用于活动链接。

注释：在CSS定义中，：hover必需位于:link和:visited之后（假如

存在的话），这样样式才能生效。

亲自试一试・实例

例子1

选择未访问、已访问、悬浮和活动链接，并设置它们的样式:

a:link{color:blue;}

a:visited{color:blue;}

a:hover{color:red;}

a:active{color:yellow;}

例子2

为链接设置不同的样式:

a・exl:hover,a.exl:active{color:red;}

a,ex2:hover,a.ex2:active{font-size:150%;}

CSS:focus选择器

实例

选择获得焦点的输入字段，并设置其样式:

input:focus

{

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持：focus选择器。

注释：假如：focus用于IE8,则必需声明v!DOCTYPE＞。

定义和用法

:focus选择器用于选取获得焦点的元素。

提示：接收键盘事务或其他用户输入的元素都允许：focus选择器c

CSS:first-letter选择器

实例

选择每个＜p＞元素的首字母，并为其设置样式：

p:first-letter

{

font-size:200%;

color:#8A2BE2;

)

阅读器支持

全部主流阅读器都支持:first-letter选择器。

定义和用法

:first-letter选择器用于选取指定选择器的首字母。

注释：以下属性可及:first-letter运用：

•字体属性

•颜色属性

•背景属性

•外边距属性

•内边距属性

•边框属性

•text-decoration

•vertical-align（只有在float为'none'时）

•text-transform

•line-height

•float

•clear

CSS:first-line选择器

实例

选择每个vp＞元素的首行，并为其设置样式:

p:first-line

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持:first-line选择器。

定义和用法

：first-line选择器用于选取指定选择器的首行。

注释：以下属性可及:first-line运用：

.字体属性

•颜色属性

.背景属性

•word-spacing

•letter-spacing

•text-decoration

•vertical-align

•text-transform

•line-height

•clear

CSS:first-child选择器

实例

选择属于其父元素的首个子元素的每个vp＞元素，并为其设置样式:

p:first-child

(

background-color:yellow;

)

阅读器支持

全部主流阅读器都支持：first-child选择器。

注释：对于IE8及更早版本的阅读器中的：first-child,必需声

明v!DOCTYPE＞。

定义和用法

：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

亲自试一试•实例

例子1

选择每个vp＞中的每个vi＞元素并设置其样式，其中的vp＞元素是

其父元素的第一个子元素：

p:first-childi

(

background:yellow;

)

例子2

选择列表中的第一个＜li＞元素并设置其样式:

li:first-child

(

background:yellow;

)

例子3

设置每个vul＞的直个手元蔓并设置其样式：

ul＞:first-child

(

background:yellow;

)

CSS:before选择器

实例

在每个vp＞三常的内容之前插入新内容

p:before

{

content:“台词：

}

阅读器支持

全部主流阅读器都支持:before选择器。

注释：对于IE8及更早版本中的：before,必需声明＜!D0CTYPE＞o

定义和用法

：before选择器在被选元素的内容前面插入内容。

请运用content属性来指定要插入的内容。

亲自试一试•实例

在每个vp＞元素前面插入内容，并设置所插入内容的样式:

p:before

{

content:“台词：

background-color:yellow;

color:red;

font-weight:bold;

)

CSS:after选择器

实例

在每个vp＞元素的内容之后插入新内容：

p:after

{

content:“台词：

}

阅读器支持

全部主流阅读器都支持：after选择器。

注释：对于IE8及更早版本中的:after,必需声明v!DOCTYPE＞。

定义和用法

：after选择器在被选元素的内容后面插入内容。

请运用content属性来指定要插入的内容。

亲自试一试•实例

在每个vp＞元素后面插入内容，并设置所插入内容的样式：

p:after

{

content:“台词:

background-color:yellow;

color:red;

font-weight:bold;

)

CSS:lang选择器

实例

选择带有以"en"开头的lang属性值的每个vp＞元素，并设置其样式:

p:lang(en)

{

background:yellow;

)

阅读器支持

全部主流阅读器都支持：lang选择器。

注释：对于IE8中的：lang,必需声明v!DOCTYPE＞。

定义和用法

：lang选择器用于选取带有以指定值开头的lang属性的元素。

注释：该值必需是整个单词，即可是单独的，比如lang=',enH,也可后跟

连接符，比如lang="en-usuo

CSS3dementi^e!ement2

实例

为全部相同的父元素中位于P元素之后的全部Ul元素设置背景：

p~ul

(

background:#ff0000;

}

阅读器支持

全部主流阅读器都支持elementl^element2选择器。

注释：对于IE8中的该选择器，必需声明＜!DOCTYPE＞o

定义和用法

elementl^e!ement2选择器element1之后出现的全部element2o

两种元素必需拥有相同的父元素，但是element2不必干脆紧

随elementl。

CSS3[attribute^-valued选择器

实例

设置class属隹域以"test"开头的全部div元素的背景色：

div[classA="test"]

{

background

)

阅读器支持

全部主流阅读器都支持[atEbuteA=va/ue]选择器。

注释：对于IE8及更早版本中的[att/ibutS=vHueJ,必需声

明v!DOCTYPE＞。

定义和用法

[attribute^=value]选择器匹配属性值以指定值开头的每个元素。

亲自试一试•实例

设置class属性值以"test"开头的全部元素的背景色：

[class八二“test”]

(

background

)

CSS3[attribute^=va/ue\选择器

实例

设置class属性值以“test”结尾的全部div元素的背景色:

div[class$="test"]

{

background

)

阅读器支持

全部主流阅读器都支持=选择器。

注释：对于IE8及更早版本中的[ait斤bute$=ua/ue],必需声

明v!DOCTYPE＞。

定义和用法

[attribute$=value]选择器匹配属性值以指定值结尾的每个元素。

亲自试一试・实例

设置class属性值以“test”结尾的全部元素的背景色：

[class$="test"]

(

background

)

CSS3[attributed-value\选择器

实例

设置class属性值包含“test”的全部div元素的背景色:

div[class*="test"]

(

background

)

阅读器支持

全部主流阅读器都支持[attribute*=va/ue]选择器。

注释：对于IE8及更早版本中的[attribute*=va/ue],必需声

明v!DOCTYPE＞。

定义和用法

[attribute^=value]选择器匹配属性值包含指定值的每个元素。

亲自试一试・实例

设置class属性值包含“test”的全部元素的背景色：

[class*="test"]

(

background

)

CSS3:first-of-type选择器

实例

指定父元素的首个p元素的背景色：

p:first-of-type

{

background:#ff0000;

}

阅读器支持

全部主流阅读器均支持:first-of-type选择器，除了正8及更早的版本。

定义和用法

:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个

元素。

提示：等同于:nth-of-type(l)o

CSS3:last-of-type选择器

实例

指定父元素的最终一个P元素的背景色：

p:last-of-type

{

background:#ff0000;

)

阅读器支持

全部主流阅读器均支持：last-of-type选择器，除了IE8及更早的版本。

定义和用法

:last-of-type选择器匹配属于其父元素的特定类型的最终一个子元素的

每个元素。

提示：等同于:nth-last-of-type(1)o

CSS3:only-of-type选择器

实例

指定属于父元素的特定类型的唯一子元素的每个P元素：

p:only-of-type

{

background:#ff0000;

}

阅读器支持

全部主流阅读器均支持：only-of-type选择器，除了IE8及更早的版本。

定义和用法

:only-of-type选择器匹配属于其父元素的特定类型的唯一子元素的每个

元素。

CSS3:only-child选择器

实例

规定属于其父元素的唯一子元素的每个P凝：____________

p:only-child

(

background:#ff0000;

)

阅读器支持

全部主流阅读器均支持:only-child选择器，除了IE8及更早的版本。

定义和用法

:only-child选择器匹配属于其父元素的唯一子元素的每个元素。

CSS3:nth-child()选择器

实例

规定属于其父元素的其次个子元素的每个P的背景色：

p:nth-child(2)

background:#ff0000;

)

阅读器支持

全部主流阅读器均支持:nth-child()选择器，除了IE8及更早的版本。

定义和用法

:nth-child(n)选择器匹配属于其父元素的第N个子元素，不论元素的类

型。

n可以是数字、关键词或公式。

提示：请参阅：nth-of-type。选择器，该选择器选取父元素的第N个指

定类型的子元素。

亲自试一试・实例

实例1

Odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一

个子兀素的卜标是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()选择器

实例

规定属于其父元素的其次个子元素的每个p元素，从最终一个子元素起先

计数:

p:nth-last-child(2)

{

background:#ff0000;

)

阅读器支持

全部主流阅读器均支持：nth-last-child()选择器，除了IE8及更早的版

本。

定义和用法

:nth-last-child(n)选择器匹配属于其元素的第N个子元素的每个元素,

不论元素的类型，从最终一个子元素起先计数。

n可以是数字、关键词或公式。

提示：请参阅：nth-last-of-type()选择器，该选择器选取父元素的第N

个指定类型的子元素，从最终一个子元素起先计数。

亲自试一试・实例

实例1

Odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一

个子元素的下标是1)O

在这里，我们为奇数和偶数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)

{

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个子元

素，及类型无关。

亲自试一试•实例

实例1

Odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一

个子兀素的卜标是1)O

在这里，我们为奇数和偶数P元素指定两种不同的背景色：

p:nth-of-type(odd)

{

background:#ff0000;

)

p:nth-of-type(even)

{

background:#0000ff;

)

实例2

运用公式(an+h)o描述；表示周期的长度，n是计数器(从0起先),

b是偏移值。

在这里，我们指定了下标是3的倍数的全部p元素的背景色：

p:nth-of-type(3n+0)

{

background:#ff0000;

)

CSS3:nth-last-of-type()选择器

实例

规定属于其父元素的其次个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个

子元素，及类型无关，从最终一个子元素起先计数。

亲自试一试-实例

实例1

Odd和even是可用于匹配下标是奇数或偶数的子元素的关键词(第一

个子元素的下标是1)O

在这里，我们为奇数和偶数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:#ff0