CSS选择器参考手册

CSS选择器参考手册CSS选择器参考手册/CSS选择器参考手册2016.09

目录CSS选择器参考手册 4CSS.class

选择器 5CSS#id

选择器 6CSS*选择器 7CSS

element

选择器 8CSS

element,element

选择器 8CSS

element

element

选择器 9CSS

element>element

选择器 9CSS

element+element

选择器 10CSS

element+element

选择器 11CSS[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

element1~element2

选择器 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()选择器 35CSS3:last-child选择器 37CSS3:root选择器 37CSS3:empty选择器 38CSS3:target选择器 38CSS3:enabled选择器 39CSS3:disabled选择器 40CSS3:checked选择器 41CSS3:not选择器 41CSS3::selection选择器 42CSS选择器参考手册我们会定期对W3School的CSS参考手册进行浏览器测试。CSS3选择器在CSS中，选择器是一种模式，用于选择需要添加样式的元素。选择器例子例子描述HYPERLINK\o"CSS.class选择器".ro选择class="intro"的所有元素。HYPERLINK\o"CSS#id选择器"#id#firstname选择id="firstname"的所有元素。HYPERLINK\o"CSS*选择器"**选择所有元素。HYPERLINK\o"CSSelement选择器"elementp选择所有<p>元素。HYPERLINK\o"CSSelement,element选择器"element,elementdiv,p选择所有<div>元素和所有<p>元素。HYPERLINK\o"CSSelementelement选择器"element

elementdivp选择<div>元素内部的所有<p>元素。HYPERLINK\o"CSSelement>element选择器"element>elementdiv>p选择父元素为<div>元素的所有<p>元素。HYPERLINK\o"CSSelement+element选择器"element+elementdiv+p选择紧接在<div>元素之后的所有<p>元素。HYPERLINK\o"CSS[attribute]选择器"[attribute][target]选择带有target属性所有元素。HYPERLINK\o"CSS[attribute=value]选择器"[attribute=value][target=_blank]选择target="_blank"的所有元素。HYPERLINK\o"CSS[attribute~=value]选择器"[attribute~=value][title~=flower]选择title属性包含单词"flower"的所有元素。HYPERLINK\o"CSS[attribute|=value]选择器"[attribute|=value][lang|=en]选择lang属性值以"en"开头的所有元素。HYPERLINK\o"CSS:link选择器":linka:link选择所有未被访问的链接。HYPERLINK\o"CSS:visited选择器":visiteda:visited选择所有已被访问的链接。HYPERLINK\o"CSS:active选择器":activea:active选择活动链接。HYPERLINK\o"CSS:hover选择器":hovera:hover选择鼠标指针位于其上的链接。HYPERLINK\o"CSS:focus选择器":focusinput:focus选择获得焦点的input元素。HYPERLINK\o"CSS:first-letter选择器":first-letterp:first-letter选择每个<p>元素的首字母。HYPERLINK\o"CSS:first-line选择器":first-linep:first-line选择每个<p>元素的首行。HYPERLINK\o"CSS:first-child选择器":first-childp:first-child选择属于父元素的第一个子元素的每个<p>元素。HYPERLINK\o"CSS:before选择器":beforep:before在每个<p>元素的内容之前插入内容。HYPERLINK\o"CSS:after选择器":afterp:after在每个<p>元素的内容之后插入内容。HYPERLINK\o"CSS:lang(language)选择器":lang(language)p:lang(it)选择带有以"it"开头的lang属性值的每个<p>元素。HYPERLINK\o"CSSelement1~element2选择器"element1~element2p~ul选择前面有<p>元素的每个<ul>元素。HYPERLINK\o"CSS[attribute^=value]选择器"[attribute^=value]a[src^="https"]选择其src属性值以"https"开头的每个<a>元素。HYPERLINK\o"CSS[attribute$=value]选择器"[attribute$=value]a[src$=".pdf"]选择其src属性以".pdf"结尾的所有<a>元素。HYPERLINK\o"CSS[attribute*=value]选择器"[attribute*=value]a[src*="abc"]选择其src属性中包含"abc"子串的每个<a>元素。HYPERLINK\o"CSS:first-of-type选择器":first-of-typep:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。HYPERLINK\o"CSS:last-of-type选择器":last-of-typep:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。HYPERLINK\o"CSS:only-of-type选择器":only-of-typep:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。HYPERLINK\o"CSS:only-child选择器":only-childp:only-child选择属于其父元素的唯一子元素的每个<p>元素。HYPERLINK\o"CSS:nth-child(n)选择器":nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。HYPERLINK\o"CSS:nth-last-child(n)选择器":nth-last-child(n)p:nth-last-child(2)同上，从最后一个子元素开始计数。HYPERLINK\o"CSS:nth-of-type(n)选择器":nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个<p>元素的每个<p>元素。HYPERLINK\o"CSS:nth-last-of-type(n)选择器":nth-last-of-type(n)p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。HYPERLINK\o"CSS:last-child选择器":last-childp:last-child选择属于其父元素最后一个子元素每个<p>元素。HYPERLINK\o"CSS:root选择器":root:root选择文档的根元素。HYPERLINK\o"CSS:empty选择器":emptyp:empty选择没有子元素的每个<p>元素（包括文本节点）。HYPERLINK\o"CSS:target选择器":target#news:target选择当前活动的#news元素。HYPERLINK\o"CSS:enabled选择器":enabledinput:enabled选择每个启用的<input>元素。HYPERLINK\o"CSS:disabled选择器":disabledinput:disabled选择每个禁用的<input>元素HYPERLINK\o"CSS:checked选择器":checkedinput:checked选择每个被选中的<input>元素。HYPERLINK\o"CSS:not(selector)选择器":not(selector):not(p)选择非<p>元素的每个元素。HYPERLINK\o"CSS::selection选择器"::selection::selection选择被用户选取的元素部分。CSS.class

选择器HYPERLINK\o"CSS选择器参考手册"CSS选择器参考手册实例选择并设置class="intro"的元素的样式：.intro{background-color:yellow;}浏览器支持所有主流浏览器都支持.class选择器。定义和用法.class选择器选取带有指定类(class)的元素。亲自试一试-实例为class="hometown"的所有<p>元素设置样式：p.hometown{background-color:yellow;}CSS#id

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

element

选择器实例选择并设置所有<p>元素的样式：p{background-color:yellow;}浏览器支持所有主流浏览器都支持

element

选择器。定义和用法element

选择器用于指定元素名称的所有元素。CSS

element,element

选择器实例选择并设置所有<h1>样式和所有<p>元素的样式：h1,p{background-color:yellow;}浏览器支持所有主流浏览器都支持

element,element

选择器。定义和用法element,element

选择器用于用于同时选取多个元素。如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。CSS

element

element

选择器实例选择并设置位于<div>元素内部的每个<p>元素的样式：divp{background-color:yellow;}浏览器支持所有主流浏览器都支持

element

element

选择器。定义和用法element

element

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

element>element

选择器实例选取父元素是<div>元素的每个<p>元素，并设置其背景色：div>p{background-color:yellow;}浏览器支持所有主流浏览器都支持

element>element

选择器。注释：对于IE8及更早版本的浏览器中的

element>element，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法element>element

选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。CSS

element+element

选择器实例选择<div>元素之后紧跟的每个<p>元素，并设置其背景色：div+p{background-color:yellow;}浏览器支持所有主流浏览器都支持

element+element

选择器。注释：对于IE8及更早版本的浏览器中的

element+element，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法element+element

选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSS

element+element

选择器实例选择<div>元素之后紧跟的每个<p>元素，并设置其背景色：div+p{background-color:yellow;}浏览器支持所有主流浏览器都支持

element+element

选择器。注释：对于IE8及更早版本的浏览器中的

element+element，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法element+element

选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。CSS[attribute]选择器实例为带有target属性的<a>元素设置样式：a[target]{background-color:yellow;}浏览器支持所有主流浏览器都支持[attribute]选择器。注释：对于IE8及更早版本的浏览器中的[attribute]，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法[attribute]选择器用于选取带有指定属性的元素。CSS[attribute=value]选择器实例为target="_blank"的<a>元素设置样式：a[target=_blank]{background-color:yellow;}浏览器支持所有主流浏览器都支持[attribute=value]选择器。注释：对于IE8及更早版本的浏览器中的[attribute=value]，必须声明

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

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

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法[attribute|=value]选择器用于选取带有以指定值开头的属性值的元素。注释：该值必须是整个单词，比如lang="en"，或者后面跟着连字符，比如lang="en-us"。亲自试一试-实例选择其class属性值以"top"开头的元素，并设置其样式：[class|=top]{background-color:yellow;}CSS:link选择器实例选择未被访问的链接，并设置其样式：a:link{background-color:yellow;}浏览器支持所有主流浏览器都支持:link选择器。定义和用法:link选择器用于选取未被访问的链接。注释：:link选择器不会设置已经访问过的链接的样式。提示：请使用

HYPERLINK\o"CSS:visited选择器":visited

选择器对指向已访问页面的链接设置样式，HYPERLINK\o"CSS:hover选择器":hover

选择器用于设置鼠标指针浮动到链接上时的样式，HYPERLINK\o"CSS:active选择器":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{background-color:yellow;}浏览器支持所有主流浏览器都支持:visited选择器。定义和用法:visited选择器用于选取已被访问的链接。提示：请使用

HYPERLINK\o"CSS:link选择器":link

选择器对指向未被访问页面的链接设置样式,

HYPERLINK\o"CSS:hover选择器":hover

选择器用于设置鼠标指针浮动到链接上时的样式，HYPERLINK\o"CSS:active选择器":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:active选择器实例选择活动链接，并设置其样式：a:active{background-color:yellow;}浏览器支持所有主流浏览器都支持:active选择器。定义和用法:active选择器用于选择活动链接。当您在一个链接上点击时，它就会成为活动的（激活的）。提示：请使用

HYPERLINK\o"CSS:link选择器":link

选择器对指向未被访问页面的链接设置样式，HYPERLINK\o"CSS:visited选择器":visited

用于设置指向已访问页面的链接的样式，HYPERLINK\o"CSS:hover选择器":hover

选择器用于设置鼠标指针浮动到链接上时的样式。亲自试一试-实例例子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;}浏览器支持所有主流浏览器都支持:hover选择器。定义和用法:hover选择器用于选择鼠标指针浮动在上面的元素。提示：:hover选择器可用于所有元素，不只是链接。提示：HYPERLINK\o"CSS:link选择器":link

选择器设置指向未被访问页面的链接的样式，HYPERLINK\o"CSS:visited选择器":visited

选择器用于设置指向已被访问的页面的链接，HYPERLINK\o"CSS:active选择器":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-size: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:#8A2BE2;}浏览器支持所有主流浏览器都支持:first-letter选择器。定义和用法:first-letter选择器用于选取指定选择器的首字母。注释：以下属性可及:first-letter使用：字体属性颜色属性背景属性外边距属性内边距属性边框属性text-decorationvertical-align（只有在float为'none'时）text-transformline-heightfloatclearCSS:first-line选择器实例选择每个<p>元素的首行，并为其设置样式：p:first-line{background-color:yellow;}浏览器支持所有主流浏览器都支持:first-line选择器。定义和用法:first-line选择器用于选取指定选择器的首行。注释：以下属性可及:first-line使用：字体属性颜色属性背景属性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclearCSS:first-child选择器实例选择属于其父元素的首个子元素的每个<p>元素，并为其设置样式：p:first-child{background-color:yellow;}浏览器支持所有主流浏览器都支持:first-child选择器。注释：对于IE8及更早版本的浏览器中的:first-child，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法:first-child选择器用于选取属于其父元素的首个子元素的指定选择器。亲自试一试-实例例子1选择每个<p>中的每个<i>元素并设置其样式，其中的<p>元素是其父元素的第一个子元素：p:first-childi{background:yellow;}例子2选择列表中的第一个<li>元素并设置其样式：li:first-child{background:yellow;}例子3设置每个<ul>的首个子元素，并设置其样式：ul>:first-child{background:yellow;}CSS:before选择器实例在每个<p>元素的内容之前插入新内容：p:before{content:"台词：";}浏览器支持所有主流浏览器都支持:before选择器。注释：对于IE8及更早版本中的:before，必须声明

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

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法:after选择器在被选元素的内容后面插入内容。请使用content属性来指定要插入的内容。亲自试一试-实例在每个<p>元素后面插入内容，并设置所插入内容的样式：p:after{content:"台词：-";background-color:yellow;color:red;font-weight:bold;}CSS:lang选择器实例选择带有以"en"开头的lang属性值的每个<p>元素，并设置其样式：p:lang(en){background:yellow;}浏览器支持所有主流浏览器都支持:lang选择器。注释：对于IE8中的:lang，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法:lang选择器用于选取带有以指定值开头的lang属性的元素。注释：该值必须是整个单词，即可是单独的，比如lang="en"，也可后跟连接符，比如lang="en-us"。CSS3

element1~element2

选择器实例为所有相同的父元素中位于p元素之后的所有ul元素设置背景：p~ul{background:#ff0000;}浏览器支持所有主流浏览器都支持

element1~element2

选择器。注释：对于IE8中的该选择器，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法element1~element2

选择器

element1

之后出现的所有

element2。两种元素必须拥有相同的父元素，但是

element2

不必直接紧随

element1。CSS3[attribute^=value]选择器实例设置class属性值以"test"开头的所有div元素的背景色：div[class^="test"]{background:#ffff00;}浏览器支持所有主流浏览器都支持[attribute^=value]选择器。注释：对于IE8及更早版本中的[attribute^=value]，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法[attribute^=value]选择器匹配属性值以指定值开头的每个元素。亲自试一试-实例设置class属性值以"test"开头的所有元素的背景色：[class^="test"]{background:#ffff00;}CSS3[attribute$=value]选择器实例设置class属性值以"test"结尾的所有div元素的背景色：div[class$="test"]{background:#ffff00;}浏览器支持所有主流浏览器都支持[attribute$=value]选择器。注释：对于IE8及更早版本中的[attribute$=value]，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法[attribute$=value]选择器匹配属性值以指定值结尾的每个元素。亲自试一试-实例设置class属性值以"test"结尾的所有元素的背景色：[class$="test"]{background:#ffff00;}CSS3[attribute*=value]选择器实例设置class属性值包含"test"的所有div元素的背景色：div[class*="test"]{background:#ffff00;}浏览器支持所有主流浏览器都支持[attribute*=value]选择器。注释：对于IE8及更早版本中的[attribute*=value]，必须声明

HYPERLINK\o"HTML<!DOCTYPE>标签"<!DOCTYPE>。定义和用法[attribute*=value]选择器匹配属性值包含指定值的每个元素。亲自试一试-实例设置class属性值包含"test"的所有元素的背景色：[class*="test"]{background:#ffff00;}CSS3:first-of-type选择器实例指定父元素的首个p元素的背景色：p:first-of-type{background:#ff0000;}浏览器支持所有主流浏览器均支持:first-of-type选择器，除了IE8及更早的版本。定义和用法:first-of-type选择器匹配属于其父元素的特定类型的首个子元素的每个元素。提示：等同于:nth-of-type(1)。CSS3:last-of-type选择器实例指定父元素的最后一个p元素的背景色：p:last-of-type{background:#ff0000;}浏览器支持所有主流浏览器均支持:last-of-type选择器，除了IE8及更早的版本。定义和用法:last-of-type选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。提示：等同于:nth-last-of-type(1)。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

可以是数字、关键词或公式。提示：请参阅

HYPERLINK\o"CSS:nth-of-type()选择器":nth-of-type()

选择器，该选择器选取父元素的第N个指定类型的子元素。亲自试一试-实例实例1Odd和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

可以是数字、关键词或公式。提示：请参阅

HYPERLINK\o"CSS:nth-last-of-type()选择器":nth-last-of-type()

选择器，该选择器选取父元素的第N个指定类型的子元素，从最后一个子元素开始计数。亲自试一试-实例实例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){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

可以是数字、关键词或公式。提示：请参阅

HYPERLINK\o"CSS:nth-child()选择器":nth-child()

选择器，该选择器选取父元素的第N个子元素，及类型无关。亲自试一试-实例实例1Odd和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()选择器实例规定属于其父元素的第二个p元素的每个p，从最后一个子元素开始计数：p:nth-last-of-type(2){background:#ff0000;}浏览器支持所有主流浏览器均支持:nth-last-of-type()选择器，除了IE8及更早的版本。定义和用法:nth-last-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素，从最后一个子元素开始计数。n

可以是数字、关键词或公式。提示：请参阅

HYPERLINK\o"CSS:nth-last-child()选择器":nth-last-child()

选择器，该选择器选取父元素的第N个子元素，及类型无关，从最后一个子元素开始计数。亲自试一试-实例实例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-