CSS選擇器參考手冊(cè)

CSS選擇器參考手冊(cè)CSS選擇器參考手冊(cè)/CSS選擇器參考手冊(cè)2016.09

目錄CSS選擇器參考手冊(cè) 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選擇器參考手冊(cè)我們會(huì)定期對(duì)W3School的CSS參考手冊(cè)進(jìn)行瀏覽器測(cè)試。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>元素內(nèi)部的所有<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選擇活動(dòng)鏈接。HYPERLINK\o"CSS:hover選擇器":hovera:hover選擇鼠標(biāo)指針位于其上的鏈接。HYPERLINK\o"CSS:focus選擇器":focusinput:focus選擇獲得焦點(diǎn)的input元素。HYPERLINK\o"CSS:first-letter選擇器":first-letterp:first-letter選擇每個(gè)<p>元素的首字母。HYPERLINK\o"CSS:first-line選擇器":first-linep:first-line選擇每個(gè)<p>元素的首行。HYPERLINK\o"CSS:first-child選擇器":first-childp:first-child選擇屬于父元素的第一個(gè)子元素的每個(gè)<p>元素。HYPERLINK\o"CSS:before選擇器":beforep:before在每個(gè)<p>元素的內(nèi)容之前插入內(nèi)容。HYPERLINK\o"CSS:after選擇器":afterp:after在每個(gè)<p>元素的內(nèi)容之后插入內(nèi)容。HYPERLINK\o"CSS:lang(language)選擇器":lang(language)p:lang(it)選擇帶有以"it"開頭的lang屬性值的每個(gè)<p>元素。HYPERLINK\o"CSSelement1~element2選擇器"element1~element2p~ul選擇前面有<p>元素的每個(gè)<ul>元素。HYPERLINK\o"CSS[attribute^=value]選擇器"[attribute^=value]a[src^="https"]選擇其src屬性值以"https"開頭的每個(gè)<a>元素。HYPERLINK\o"CSS[attribute$=value]選擇器"[attribute$=value]a[src$=".pdf"]選擇其src屬性以".pdf"結(jié)尾的所有<a>元素。HYPERLINK\o"CSS[attribute*=value]選擇器"[attribute*=value]a[src*="abc"]選擇其src屬性中包含"abc"子串的每個(gè)<a>元素。HYPERLINK\o"CSS:first-of-type選擇器":first-of-typep:first-of-type選擇屬于其父元素的首個(gè)<p>元素的每個(gè)<p>元素。HYPERLINK\o"CSS:last-of-type選擇器":last-of-typep:last-of-type選擇屬于其父元素的最后<p>元素的每個(gè)<p>元素。HYPERLINK\o"CSS:only-of-type選擇器":only-of-typep:only-of-type選擇屬于其父元素唯一的<p>元素的每個(gè)<p>元素。HYPERLINK\o"CSS:only-child選擇器":only-childp:only-child選擇屬于其父元素的唯一子元素的每個(gè)<p>元素。HYPERLINK\o"CSS:nth-child(n)選擇器":nth-child(n)p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)<p>元素。HYPERLINK\o"CSS:nth-last-child(n)選擇器":nth-last-child(n)p:nth-last-child(2)同上，從最后一個(gè)子元素開始計(jì)數(shù)。HYPERLINK\o"CSS:nth-of-type(n)選擇器":nth-of-type(n)p:nth-of-type(2)選擇屬于其父元素第二個(gè)<p>元素的每個(gè)<p>元素。HYPERLINK\o"CSS:nth-last-of-type(n)選擇器":nth-last-of-type(n)p:nth-last-of-type(2)同上，但是從最后一個(gè)子元素開始計(jì)數(shù)。HYPERLINK\o"CSS:last-child選擇器":last-childp:last-child選擇屬于其父元素最后一個(gè)子元素每個(gè)<p>元素。HYPERLINK\o"CSS:root選擇器":root:root選擇文檔的根元素。HYPERLINK\o"CSS:empty選擇器":emptyp:empty選擇沒有子元素的每個(gè)<p>元素（包括文本節(jié)點(diǎn)）。HYPERLINK\o"CSS:target選擇器":target#news:target選擇當(dāng)前活動(dòng)的#news元素。HYPERLINK\o"CSS:enabled選擇器":enabledinput:enabled選擇每個(gè)啟用的<input>元素。HYPERLINK\o"CSS:disabled選擇器":disabledinput:disabled選擇每個(gè)禁用的<input>元素HYPERLINK\o"CSS:checked選擇器":checkedinput:checked選擇每個(gè)被選中的<input>元素。HYPERLINK\o"CSS:not(selector)選擇器":not(selector):not(p)選擇非<p>元素的每個(gè)元素。HYPERLINK\o"CSS::selection選擇器"::selection::selection選擇被用戶選取的元素部分。CSS.class

選擇器HYPERLINK\o"CSS選擇器參考手冊(cè)"CSS選擇器參考手冊(cè)實(shí)例選擇并設(shè)置class="intro"的元素的樣式：.intro{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持.class選擇器。定義和用法.class選擇器選取帶有指定類(class)的元素。親自試一試-實(shí)例為class="hometown"的所有<p>元素設(shè)置樣式：p.hometown{background-color:yellow;}CSS#id

選擇器實(shí)例為id="firstname"的元素設(shè)置樣式：#firstname{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持#id選擇器。定義和用法#id選擇器為帶有指定id的元素設(shè)置樣式。CSS*選擇器實(shí)例選擇所有元素，并設(shè)置它們的背景色：*{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持#id選擇器。定義和用法*選擇器選取所有元素。*選擇器也能選取另一個(gè)元素中的所有元素：實(shí)例選取<div>元素內(nèi)部的所有元素：div*{background-color:yellow;}CSS

element

選擇器實(shí)例選擇并設(shè)置所有<p>元素的樣式：p{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element

選擇器。定義和用法element

選擇器用于指定元素名稱的所有元素。CSS

element,element

選擇器實(shí)例選擇并設(shè)置所有<h1>樣式和所有<p>元素的樣式：h1,p{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element,element

選擇器。定義和用法element,element

選擇器用于用于同時(shí)選取多個(gè)元素。如需為不同的元素設(shè)置相同的樣式，請(qǐng)用逗號(hào)來分隔每個(gè)元素。CSS

element

element

選擇器實(shí)例選擇并設(shè)置位于<div>元素內(nèi)部的每個(gè)<p>元素的樣式：divp{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element

element

選擇器。定義和用法element

element

選擇器用于選取元素內(nèi)部的元素。CSS

element>element

選擇器實(shí)例選取父元素是<div>元素的每個(gè)<p>元素，并設(shè)置其背景色：div>p{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element>element

選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的

element>element，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法element>element

選擇器用于選取帶有特定父元素的元素。注釋：如果元素不是父元素的直接子元素，則不會(huì)被選擇。CSS

element+element

選擇器實(shí)例選擇<div>元素之后緊跟的每個(gè)<p>元素，并設(shè)置其背景色：div+p{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element+element

選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的

element+element，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法element+element

選擇器用于選取第一個(gè)指定的元素之后（不是內(nèi)部）緊跟的元素。CSS

element+element

選擇器實(shí)例選擇<div>元素之后緊跟的每個(gè)<p>元素，并設(shè)置其背景色：div+p{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持

element+element

選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的

element+element，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法element+element

選擇器用于選取第一個(gè)指定的元素之后（不是內(nèi)部）緊跟的元素。CSS[attribute]選擇器實(shí)例為帶有target屬性的<a>元素設(shè)置樣式：a[target]{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持[attribute]選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的[attribute]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute]選擇器用于選取帶有指定屬性的元素。CSS[attribute=value]選擇器實(shí)例為target="_blank"的<a>元素設(shè)置樣式：a[target=_blank]{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持[attribute=value]選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的[attribute=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute=value]選擇器用于選取帶有指定屬性和值的元素。CSS[attribute~=value]選擇器實(shí)例選擇titile屬性包含單詞"flower"的元素，并設(shè)置其樣式：[title~=flower]{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持[attribute~=value]選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的[attribute~=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute~=value]選擇器用于選取屬性值中包含指定詞匯的元素。CSS[attribute|=value]選擇器實(shí)例選擇lang屬性值以"en"開頭的元素，并設(shè)置其樣式：[lang|=en]{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持[attribute|=value]選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的[attribute|=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute|=value]選擇器用于選取帶有以指定值開頭的屬性值的元素。注釋：該值必須是整個(gè)單詞，比如lang="en"，或者后面跟著連字符，比如lang="en-us"。親自試一試-實(shí)例選擇其class屬性值以"top"開頭的元素，并設(shè)置其樣式：[class|=top]{background-color:yellow;}CSS:link選擇器實(shí)例選擇未被訪問的鏈接，并設(shè)置其樣式：a:link{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:link選擇器。定義和用法:link選擇器用于選取未被訪問的鏈接。注釋：:link選擇器不會(huì)設(shè)置已經(jīng)訪問過的鏈接的樣式。提示：請(qǐng)使用

HYPERLINK\o"CSS:visited選擇器":visited

選擇器對(duì)指向已訪問頁面的鏈接設(shè)置樣式，HYPERLINK\o"CSS:hover選擇器":hover

選擇器用于設(shè)置鼠標(biāo)指針浮動(dòng)到鏈接上時(shí)的樣式，HYPERLINK\o"CSS:active選擇器":active選擇器用于設(shè)置點(diǎn)擊鏈接時(shí)的樣式。親自試一試-實(shí)例例子1選擇未訪問、已訪問、懸浮和活動(dòng)鏈接，并設(shè)置它們的樣式：a:link{color:blue;}a:visited{color:blue;}a:hover{color:red;}a:active{color:yellow;}例子2為鏈接設(shè)置不同的樣式：a.ex1:hover,a.ex1:active{color:red;}a.ex2:hover,a.ex2:active{font-size:150%;}CSS:visited選擇器實(shí)例選擇已訪問的鏈接，并設(shè)置其樣式：a:visited{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:visited選擇器。定義和用法:visited選擇器用于選取已被訪問的鏈接。提示：請(qǐng)使用

HYPERLINK\o"CSS:link選擇器":link

選擇器對(duì)指向未被訪問頁面的鏈接設(shè)置樣式,

HYPERLINK\o"CSS:hover選擇器":hover

選擇器用于設(shè)置鼠標(biāo)指針浮動(dòng)到鏈接上時(shí)的樣式，HYPERLINK\o"CSS:active選擇器":active選擇器用于設(shè)置點(diǎn)擊鏈接時(shí)的樣式。親自試一試-實(shí)例例子1選擇未訪問、已訪問、懸浮和活動(dòng)鏈接，并設(shè)置它們的樣式：a:link{color:blue;}a:visited{color:blue;}a:hover{color:red;}a:active{color:yellow;}例子2為鏈接設(shè)置不同的樣式：a.ex1:hover,a.ex1:active{color:red;}a.ex2:hover,a.ex2:active{font-size:150%;}CSS:active選擇器實(shí)例選擇活動(dòng)鏈接，并設(shè)置其樣式：a:active{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:active選擇器。定義和用法:active選擇器用于選擇活動(dòng)鏈接。當(dāng)您在一個(gè)鏈接上點(diǎn)擊時(shí)，它就會(huì)成為活動(dòng)的（激活的）。提示：請(qǐng)使用

HYPERLINK\o"CSS:link選擇器":link

選擇器對(duì)指向未被訪問頁面的鏈接設(shè)置樣式，HYPERLINK\o"CSS:visited選擇器":visited

用于設(shè)置指向已訪問頁面的鏈接的樣式，HYPERLINK\o"CSS:hover選擇器":hover

選擇器用于設(shè)置鼠標(biāo)指針浮動(dòng)到鏈接上時(shí)的樣式。親自試一試-實(shí)例例子1選擇未訪問、已訪問、懸浮和活動(dòng)鏈接，并設(shè)置它們的樣式：a:link{color:blue;}a:visited{color:blue;}a:hover{color:red;}a:active{color:yellow;}例子2為鏈接設(shè)置不同的樣式：a.ex1:hover,a.ex1:active{color:red;}a.ex2:hover,a.ex2:active{font-size:150%;}CSS:hover選擇器實(shí)例選擇鼠標(biāo)指針浮動(dòng)在其上的元素，并設(shè)置其樣式：a:hover{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:hover選擇器。定義和用法:hover選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。提示：:hover選擇器可用于所有元素，不只是鏈接。提示：HYPERLINK\o"CSS:link選擇器":link

選擇器設(shè)置指向未被訪問頁面的鏈接的樣式，HYPERLINK\o"CSS:visited選擇器":visited

選擇器用于設(shè)置指向已被訪問的頁面的鏈接，HYPERLINK\o"CSS:active選擇器":active

選擇器用于活動(dòng)鏈接。注釋：在CSS定義中，:hover必須位于:link和:visited之后（如果存在的話），這樣樣式才能生效。親自試一試-實(shí)例例子1選擇未訪問、已訪問、懸浮和活動(dòng)鏈接，并設(shè)置它們的樣式：a:link{color:blue;}a:visited{color:blue;}a:hover{color:red;}a:active{color:yellow;}例子2為鏈接設(shè)置不同的樣式：a.ex1:hover,a.ex1:active{color:red;}a.ex2:hover,a.ex2:active{font-size:150%;}CSS:focus選擇器實(shí)例選擇獲得焦點(diǎn)的輸入字段，并設(shè)置其樣式：input:focus{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:focus選擇器。注釋：如果:focus用于IE8，則必須聲明<!DOCTYPE>。定義和用法:focus選擇器用于選取獲得焦點(diǎn)的元素。提示：接收鍵盤事件或其他用戶輸入的元素都允許:focus選擇器。CSS:first-letter選擇器實(shí)例選擇每個(gè)<p>元素的首字母，并為其設(shè)置樣式：p:first-letter{font-size:200%;color:#8A2BE2;}瀏覽器支持所有主流瀏覽器都支持:first-letter選擇器。定義和用法:first-letter選擇器用于選取指定選擇器的首字母。注釋：以下屬性可及:first-letter使用：字體屬性顏色屬性背景屬性外邊距屬性內(nèi)邊距屬性邊框?qū)傩詔ext-decorationvertical-align（只有在float為'none'時(shí)）text-transformline-heightfloatclearCSS:first-line選擇器實(shí)例選擇每個(gè)<p>元素的首行，并為其設(shè)置樣式：p:first-line{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:first-line選擇器。定義和用法:first-line選擇器用于選取指定選擇器的首行。注釋：以下屬性可及:first-line使用：字體屬性顏色屬性背景屬性word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclearCSS:first-child選擇器實(shí)例選擇屬于其父元素的首個(gè)子元素的每個(gè)<p>元素，并為其設(shè)置樣式：p:first-child{background-color:yellow;}瀏覽器支持所有主流瀏覽器都支持:first-child選擇器。注釋：對(duì)于IE8及更早版本的瀏覽器中的:first-child，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法:first-child選擇器用于選取屬于其父元素的首個(gè)子元素的指定選擇器。親自試一試-實(shí)例例子1選擇每個(gè)<p>中的每個(gè)<i>元素并設(shè)置其樣式，其中的<p>元素是其父元素的第一個(gè)子元素：p:first-childi{background:yellow;}例子2選擇列表中的第一個(gè)<li>元素并設(shè)置其樣式：li:first-child{background:yellow;}例子3設(shè)置每個(gè)<ul>的首個(gè)子元素，并設(shè)置其樣式：ul>:first-child{background:yellow;}CSS:before選擇器實(shí)例在每個(gè)<p>元素的內(nèi)容之前插入新內(nèi)容：p:before{content:"臺(tái)詞：";}瀏覽器支持所有主流瀏覽器都支持:before選擇器。注釋：對(duì)于IE8及更早版本中的:before，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法:before選擇器在被選元素的內(nèi)容前面插入內(nèi)容。請(qǐng)使用content屬性來指定要插入的內(nèi)容。親自試一試-實(shí)例在每個(gè)<p>元素前面插入內(nèi)容，并設(shè)置所插入內(nèi)容的樣式：p:before{content:"臺(tái)詞：-";background-color:yellow;color:red;font-weight:bold;}CSS:after選擇器實(shí)例在每個(gè)<p>元素的內(nèi)容之后插入新內(nèi)容：p:after{content:"臺(tái)詞：";}瀏覽器支持所有主流瀏覽器都支持:after選擇器。注釋：對(duì)于IE8及更早版本中的:after，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法:after選擇器在被選元素的內(nèi)容后面插入內(nèi)容。請(qǐng)使用content屬性來指定要插入的內(nèi)容。親自試一試-實(shí)例在每個(gè)<p>元素后面插入內(nèi)容，并設(shè)置所插入內(nèi)容的樣式：p:after{content:"臺(tái)詞：-";background-color:yellow;color:red;font-weight:bold;}CSS:lang選擇器實(shí)例選擇帶有以"en"開頭的lang屬性值的每個(gè)<p>元素，并設(shè)置其樣式：p:lang(en){background:yellow;}瀏覽器支持所有主流瀏覽器都支持:lang選擇器。注釋：對(duì)于IE8中的:lang，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法:lang選擇器用于選取帶有以指定值開頭的lang屬性的元素。注釋：該值必須是整個(gè)單詞，即可是單獨(dú)的，比如lang="en"，也可后跟連接符，比如lang="en-us"。CSS3

element1~element2

選擇器實(shí)例為所有相同的父元素中位于p元素之后的所有ul元素設(shè)置背景：p~ul{background:#ff0000;}瀏覽器支持所有主流瀏覽器都支持

element1~element2

選擇器。注釋：對(duì)于IE8中的該選擇器，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法element1~element2

選擇器

element1

之后出現(xiàn)的所有

element2。兩種元素必須擁有相同的父元素，但是

element2

不必直接緊隨

element1。CSS3[attribute^=value]選擇器實(shí)例設(shè)置class屬性值以"test"開頭的所有div元素的背景色：div[class^="test"]{background:#ffff00;}瀏覽器支持所有主流瀏覽器都支持[attribute^=value]選擇器。注釋：對(duì)于IE8及更早版本中的[attribute^=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute^=value]選擇器匹配屬性值以指定值開頭的每個(gè)元素。親自試一試-實(shí)例設(shè)置class屬性值以"test"開頭的所有元素的背景色：[class^="test"]{background:#ffff00;}CSS3[attribute$=value]選擇器實(shí)例設(shè)置class屬性值以"test"結(jié)尾的所有div元素的背景色：div[class$="test"]{background:#ffff00;}瀏覽器支持所有主流瀏覽器都支持[attribute$=value]選擇器。注釋：對(duì)于IE8及更早版本中的[attribute$=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute$=value]選擇器匹配屬性值以指定值結(jié)尾的每個(gè)元素。親自試一試-實(shí)例設(shè)置class屬性值以"test"結(jié)尾的所有元素的背景色：[class$="test"]{background:#ffff00;}CSS3[attribute*=value]選擇器實(shí)例設(shè)置class屬性值包含"test"的所有div元素的背景色：div[class*="test"]{background:#ffff00;}瀏覽器支持所有主流瀏覽器都支持[attribute*=value]選擇器。注釋：對(duì)于IE8及更早版本中的[attribute*=value]，必須聲明

HYPERLINK\o"HTML<!DOCTYPE>標(biāo)簽"<!DOCTYPE>。定義和用法[attribute*=value]選擇器匹配屬性值包含指定值的每個(gè)元素。親自試一試-實(shí)例設(shè)置class屬性值包含"test"的所有元素的背景色：[class*="test"]{background:#ffff00;}CSS3:first-of-type選擇器實(shí)例指定父元素的首個(gè)p元素的背景色：p:first-of-type{background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:first-of-type選擇器，除了IE8及更早的版本。定義和用法:first-of-type選擇器匹配屬于其父元素的特定類型的首個(gè)子元素的每個(gè)元素。提示：等同于:nth-of-type(1)。CSS3:last-of-type選擇器實(shí)例指定父元素的最后一個(gè)p元素的背景色：p:last-of-type{background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:last-of-type選擇器，除了IE8及更早的版本。定義和用法:last-of-type選擇器匹配屬于其父元素的特定類型的最后一個(gè)子元素的每個(gè)元素。提示：等同于:nth-last-of-type(1)。CSS3:only-of-type選擇器實(shí)例指定屬于父元素的特定類型的唯一子元素的每個(gè)p元素：p:only-of-type{background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:only-of-type選擇器，除了IE8及更早的版本。定義和用法:only-of-type選擇器匹配屬于其父元素的特定類型的唯一子元素的每個(gè)元素。CSS3:only-child選擇器實(shí)例規(guī)定屬于其父元素的唯一子元素的每個(gè)p元素：p:only-child{background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:only-child選擇器，除了IE8及更早的版本。定義和用法:only-child選擇器匹配屬于其父元素的唯一子元素的每個(gè)元素。CSS3:nth-child()選擇器實(shí)例規(guī)定屬于其父元素的第二個(gè)子元素的每個(gè)p的背景色：p:nth-child(2){background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:nth-child()選擇器，除了IE8及更早的版本。定義和用法:nth-child(n)選擇器匹配屬于其父元素的第N個(gè)子元素，不論元素的類型。n

可以是數(shù)字、關(guān)鍵詞或公式。提示：請(qǐng)參閱

HYPERLINK\o"CSS:nth-of-type()選擇器":nth-of-type()

選擇器，該選擇器選取父元素的第N個(gè)指定類型的子元素。親自試一試-實(shí)例實(shí)例1Odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是1）。在這里，我們?yōu)槠鏀?shù)和偶數(shù)p元素指定兩種不同的背景色：p:nth-child(odd){background:#ff0000;}p:nth-child(even){background:#0000ff;}實(shí)例2使用公式(an

+

b)。描述：表示周期的長(zhǎng)度，n是計(jì)數(shù)器（從0開始），b是偏移值。在這里，我們指定了下標(biāo)是3的倍數(shù)的所有p元素的背景色：p:nth-child(3n+0){background:#ff0000;}CSS3:nth-last-child()選擇器實(shí)例規(guī)定屬于其父元素的第二個(gè)子元素的每個(gè)p元素，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-last-child(2){background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:nth-last-child()選擇器，除了IE8及更早的版本。定義和用法:nth-last-child(n)選擇器匹配屬于其元素的第N個(gè)子元素的每個(gè)元素，不論元素的類型，從最后一個(gè)子元素開始計(jì)數(shù)。n

可以是數(shù)字、關(guān)鍵詞或公式。提示：請(qǐng)參閱

HYPERLINK\o"CSS:nth-last-of-type()選擇器":nth-last-of-type()

選擇器，該選擇器選取父元素的第N個(gè)指定類型的子元素，從最后一個(gè)子元素開始計(jì)數(shù)。親自試一試-實(shí)例實(shí)例1Odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是1）。在這里，我們?yōu)槠鏀?shù)和偶數(shù)p元素指定兩種不同的背景色，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-last-child(odd){background:#ff0000;}p:nth-last-child(even){background:#0000ff;}實(shí)例2使用公式(an

+

b)。描述：表示周期的長(zhǎng)度，n是計(jì)數(shù)器（從0開始），b是偏移值。在這里，我們指定了下標(biāo)是3的倍數(shù)的所有p元素的背景色，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-last-child(3n+0){background:#ff0000;}CSS3:nth-of-type()選擇器實(shí)例規(guī)定屬于其父元素的第二個(gè)p元素的每個(gè)p：p:nth-of-type(2){background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:nth-of-type()選擇器，除了IE8及更早的版本。定義和用法:nth-of-type(n)選擇器匹配屬于父元素的特定類型的第N個(gè)子元素的每個(gè)元素.n

可以是數(shù)字、關(guān)鍵詞或公式。提示：請(qǐng)參閱

HYPERLINK\o"CSS:nth-child()選擇器":nth-child()

選擇器，該選擇器選取父元素的第N個(gè)子元素，及類型無關(guān)。親自試一試-實(shí)例實(shí)例1Odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是1）。在這里，我們?yōu)槠鏀?shù)和偶數(shù)p元素指定兩種不同的背景色：p:nth-of-type(odd){background:#ff0000;}p:nth-of-type(even){background:#0000ff;}實(shí)例2使用公式(an

+

b)。描述：表示周期的長(zhǎng)度，n是計(jì)數(shù)器（從0開始），b是偏移值。在這里，我們指定了下標(biāo)是3的倍數(shù)的所有p元素的背景色：p:nth-of-type(3n+0){background:#ff0000;}CSS3:nth-last-of-type()選擇器實(shí)例規(guī)定屬于其父元素的第二個(gè)p元素的每個(gè)p，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-last-of-type(2){background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:nth-last-of-type()選擇器，除了IE8及更早的版本。定義和用法:nth-last-of-type(n)選擇器匹配屬于父元素的特定類型的第N個(gè)子元素的每個(gè)元素，從最后一個(gè)子元素開始計(jì)數(shù)。n

可以是數(shù)字、關(guān)鍵詞或公式。提示：請(qǐng)參閱

HYPERLINK\o"CSS:nth-last-child()選擇器":nth-last-child()

選擇器，該選擇器選取父元素的第N個(gè)子元素，及類型無關(guān)，從最后一個(gè)子元素開始計(jì)數(shù)。親自試一試-實(shí)例實(shí)例1Odd和even是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞（第一個(gè)子元素的下標(biāo)是1）。在這里，我們?yōu)槠鏀?shù)和偶數(shù)p元素指定兩種不同的背景色，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-last-of-type(odd){background:#ff0000;}p:nth-last-of-type(even){background:#0000ff;}實(shí)例2使用公式(an

+

b)。描述：表示周期的長(zhǎng)度，n是計(jì)數(shù)器（從0開始），b是偏移值。在這里，我們指定了下標(biāo)是3的倍數(shù)的所有p元素的背景色，從最后一個(gè)子元素開始計(jì)數(shù)：p:nth-