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)同上，從最后一個子元素開始計數(shù)。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)同上，但是從最后一個子元素開始計數(shù)。HYPERLINK\o"CSS:last-child選擇器":last-childp:last-child選擇屬于其父元素最后一個子元素每個<p>元素。HYPERLINK\o"CSS:root選擇器":root:root選擇文檔的根元素。HYPERLINK\o"CSS:empty選擇器":emptyp:empty選擇沒有子元素的每個<p>元素（包括文本節(jié)點）。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

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

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選擇器實例規(guī)定屬于其父元素的唯一子元素的每個p元素：p:only-child{background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:only-child選擇器，除了IE8及更早的版本。定義和用法:only-child選擇器匹配屬于其父元素的唯一子元素的每個元素。CSS3:nth-child()選擇器實例規(guī)定屬于其父元素的第二個子元素的每個p的背景色：p:nth-child(2){background:#ff0000;}瀏覽器支持所有主流瀏覽器均支持:nth-child()選擇器，除了IE8及更早的版本。定義和用法:nth-child(n)選擇器匹配屬于其父元素的第N個子元素，不論元素的類型。n

可以是數(shù)字、關鍵詞或公式。提示：請參閱

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

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

+

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

可以是數(shù)字、關鍵詞或公式。提示：請參閱

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

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

+

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

可以是數(shù)字、關鍵詞或公式。提示：請參閱

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

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

+

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

可以是數(shù)字、關鍵詞或公式。提示：請參閱

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

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

+

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