概覽

在 CSS 中，選擇器用于選擇需要添加樣式的元素。

CSS 選擇器非常豐富，現(xiàn)將 CSS 1 - 3 目前所有的選擇器列舉如下。

選擇器

例子

例子描述

CSS版本

.class

.intro

選擇 class="intro" 的所有元素。

1

#id

#firstname

選擇 id="firstname" 的元素。

1

*

*

選擇所有元素。

2

element

p

選擇所有

元素。

1

selector,selector

div,p

選擇所有

元素和所有

元素。

1

selector selector

div p

選擇

元素內(nèi)部的所有

元素。

1

selector>selector

div>p

選擇父元素為

元素的所有

元素。

2

selector+selector

div+p

選擇緊接在

元素之后的所有

元素。

2

[attribute]

[target]

選擇帶有 target 屬性所有元素。

2

[attribute=value]

[target=_blank]

選擇 target="_blank" 的所有元素。

2

[attribute~=value]

[title~=flower]

選擇 title 屬性包含單詞 "flower" 的所有元素。

2

[attribute|=value]

[lang|=en]

選擇 lang 屬性值以 "en" 開(kāi)頭的所有元素。

2

:link

a:link

選擇所有未被訪問(wèn)的鏈接。

1

:visited

a:visited

選擇所有已被訪問(wèn)的鏈接。

1

:active

a:active

選擇活動(dòng)鏈接。

1

:hover

a:hover

選擇鼠標(biāo)指針位于其上的鏈接。

1

:focus

input:focus

選擇獲得焦點(diǎn)的 input 元素。

2

:first-letter

p:first-letter

選擇每個(gè)

元素的首字母。

1

:first-line

p:first-line

選擇每個(gè)

元素的首行。

1

:first-child

p:first-child

選擇屬于父元素的第一個(gè)子元素的每個(gè)

元素。

2

:before

p:before

在每個(gè)

元素的內(nèi)容之前插入內(nèi)容。

2

:after

p:after

在每個(gè)

元素的內(nèi)容之后插入內(nèi)容。

2

:lang(language)

p:lang(it)

選擇帶有以 "it" 開(kāi)頭的 lang 屬性值的每個(gè)

元素。

2

selector~selector

p~ul

選擇前面有

元素的每個(gè)

• 元素。

3

[attribute^=value]

a[src^="https"]

選擇其 src 屬性值以 "https" 開(kāi)頭的每個(gè) 元素。

3

[attribute$=value]

a[src$=".pdf"]

選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 元素。

3

[attribute*=value]

a[src*="abc"]

選擇其 src 屬性中包含 "abc" 子串的每個(gè) 元素。

3

:first-of-type

p:first-of-type

選擇屬于其父元素的首個(gè)

元素。

3

:last-of-type

p:last-of-type

選擇屬于其父元素的最后

元素。

3

:only-of-type

p:only-of-type

選擇屬于其父元素只有唯一的

元素。

3

:only-child

p:only-child

選擇屬于其父元素只有唯一的子元素

.

3

:nth-child(n)

p:nth-child(2)

選擇屬于其父元素的第二個(gè)子元素

.

3

:nth-last-child(n)

p:nth-last-child(2)

同上，從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。

3

:nth-of-type(n)

p:nth-of-type(2)

選擇屬于其父元素第二個(gè)

元素。

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上，但是從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。

3

:last-child

p:last-child

選擇屬于其父元素最后一個(gè)子元素

.

3

:root

:root

選擇文檔的根元素。

3

:empty

p:empty

選擇沒(méi)有子元素的每個(gè)

元素(包括文本節(jié)點(diǎn))。

3

:target

#news:target

選擇當(dāng)前活動(dòng)的 #news 元素。

3

:enabled

input:enabled

選擇每個(gè)啟用的 元素。

3

:disabled

input:disabled

選擇每個(gè)禁用的 元素

3

:checked

input:checked

選擇每個(gè)被選中的 元素。

3

:not(selector)

:not(p)

選擇非

元素的每個(gè)元素。

3

::selection

::selection

選擇被用戶選取的元素部分。

3

:out-of-range

input:out-of-range

匹配值在指定區(qū)間之外的 元素。

3

:in-range

input:in-range

匹配值在指定區(qū)間之內(nèi)的 元素。

3

:read-write

input:read-write

匹配可讀可寫(xiě)的 元素。

3

:optional

input:optional

匹配可選輸入的 元素。

3

:required

input:required

匹配必須輸入的 元素。

3

:valid

input:valid

匹配輸入有效的 元素。

3

:invalid

input:invalid

匹配輸入無(wú)效的 元素。

3

CSS 選擇器這么多，都需要掌握嗎？多嗎，分組去記憶還是很好掌握的，掌握的越多你就越能隨心所欲的操縱HTML文檔。

上面的選擇器只是基礎(chǔ)，掌握了上面的內(nèi)容，只能說(shuō)明你識(shí)字了，至于能不能組成句子，甚至優(yōu)美的句子還有很大的距離。

記住并使用選擇器

如何記住這么多選擇器呢？我個(gè)人記憶方式是，一是分組，二是使用，在此分享給大家。

基礎(chǔ)選擇器

類(lèi)選擇器.class，ID選擇器#id，通配符選擇器*，元素選擇器element是四個(gè)最基本的選擇器，相信你早就記住了。

* {

color: black;

}

a {

color: blue;

}

.msg {

color: red;

}

#top {

background-color: #ff0000;

}

選擇器組合

通過(guò)使用特定的符號(hào)來(lái)連接選擇器可以實(shí)現(xiàn)更加豐富的選擇功能。

selector, selector

逗號(hào)連接兩個(gè)或多個(gè)選擇器實(shí)現(xiàn)多選的功能。

h1, h2, .title {

color: black;

}

h1, h2 標(biāo)簽和 class="title" 的元素的字體顏色都設(shè)置為黑色。

selector selector

空格直接相連的兩個(gè)或多個(gè)選擇器可以實(shí)現(xiàn)精確定位的功能。

#header h3 {

color: #fff;

}

ID為header的元素下面的h3元素字體顏色設(shè)置為白色。

selector > selector

大于號(hào)連接的兩個(gè)選擇器實(shí)現(xiàn)父子選擇的功能。

HTML文檔片段

hello,job1...

hello,job2...

hi,job3...

hi,job4...

CSS樣式

.info > p {

background-color: yellow;

}

.info下的所有直接子元素 p(帶有hello的段落)背景被設(shè)置為黃色，其余的(帶有hi的段落，不是子元素或不是直接子元素)不受影響。

selector + selector

加號(hào)相連的兩個(gè)選擇器實(shí)現(xiàn)同級(jí)緊鄰的元素選擇的功能。

HTML部分文檔

歡迎來(lái)到我到的主頁(yè)

我是唐老鴨。

我最好的朋友是米老鼠。

我的樣式會(huì)改變。

CSS樣式

div + p + p {

background-color: yellow;

}

div 緊挨的第一個(gè)同級(jí)元素 p 是“我最好的朋友是米老鼠。”，然后又一個(gè) + 連著 p 最終選中最后一個(gè) p.

selector ~ selector

波浪線連接的兩個(gè)選擇器實(shí)現(xiàn)同級(jí)并在其下面所有選擇器指定元素的選擇功能(好繞，看例子吧)。

HTML文檔

A div element.

• Coffee
• Tea
• Milk

The first paragraph.

• Coffee
• Tea
• Milk

Another list

• Coffee
• Tea
• Milk

CSS樣式

p ~ ul{

background:#ff0000;

}

p 元素同級(jí)的 ul 并且 ul 元素是在 p 的下面。

注意：這個(gè)是CSS3新增的選擇器。

選擇器結(jié)合

結(jié)合的意思嘛，就是連著寫(xiě)在一起唄。

div#user {

color: black;

}

我是黑色字體

常用的就是 element#id,element.class.

也有一種多類(lèi)選擇器，也算選擇器結(jié)合

HTML文檔

This paragraph is very important.

This is a warning.

This paragraph is a very important warning.

CSS樣式

.important {font-weight: bold;}

.warning {font-style: italic;}

.important.warning {background: silver;}

注意：在 IE7 之前的版本中，不能正確地處理多類(lèi)選擇器。

屬性選擇器

HTML標(biāo)簽可以定義若干屬性，我們可以通過(guò)屬性選擇器進(jìn)行元素的選取。

注意區(qū)分CSS3新增的屬性選擇器。

[attribute]

選取包含某屬性的元素。

a[href]

選取包含href屬性的a標(biāo)簽。

[attribute=value]

選擇某個(gè)屬性attribute并且屬性值為value的元素。

.info[ref='good']

[attribute~=value]

選擇某個(gè)屬性attribute并且屬性值中有value這個(gè)單詞的元素。

這里是指單詞，屬性值如果是 boy man 則有兩個(gè)單詞。

p[class~='man']

[attribute|=value]

屬性起始值為value的元素。

p[class|='cls']

以上是CSS2開(kāi)始提供的屬性選擇器，下面的將是CSS3提供的選擇器，注意區(qū)別使用。

[attribute^=value]

屬性值以value開(kāi)始的元素。

[attribute$=value]

屬性值以value結(jié)尾的元素。

[attribute*=value]

屬性值包含value的元素，不一定是單詞喲。

偽類(lèi)選擇器

所謂的偽類(lèi)，你可以簡(jiǎn)單的理解為帶 : 的選擇器。偽類(lèi)很好理解，一般從名稱(chēng)上就可以知道其作用了。

可以從以下幾個(gè)方面去記。下面的歸類(lèi)只用來(lái)方便記憶，這些選擇器并不局限于我所列舉的場(chǎng)景。

跟 a 緊密關(guān)聯(lián)的

a:link

所有未被訪問(wèn)的鏈接。

a:hover

鼠標(biāo)移動(dòng)到鏈接上面。

a:active

鼠標(biāo)點(diǎn)按在鏈接上不松開(kāi)。

a:visited

鏈接已經(jīng)點(diǎn)擊過(guò)。

注意: 為了產(chǎn)生預(yù)期的效果，在CSS定義中，盡量采用上面四個(gè)的順序去定義。

:target

是CSS3中新增的選擇器，用于標(biāo)示當(dāng)前處于活動(dòng)的錨標(biāo)記。

HTML文檔

This is a heading

Jump to New content 1

Jump to New content 2

Click on the links above and the :target selector highlight the current active HTML anchor.

New content 1...

New content 2...

CSS樣式

:target {

border: 2px solid #D4D4D4;

background-color: #e5eecc;

}

當(dāng)點(diǎn)擊錨定位a標(biāo)簽時(shí)，相應(yīng)的錨元素會(huì)設(shè)置為指定樣式。

跟 input 緊密關(guān)聯(lián)的

:focus

選擇具有焦點(diǎn)的元素，一般都是輸入元素。

除了 :focus 是CSS2開(kāi)始有的，下面的都是CSS3新增的偽類(lèi)。

:enabled

可用的輸入元素。

:disabled

不可用的輸入元素。

input[type="text"]:disabled {

background:#dddddd;

}

:valid

匹配輸入合法的元素，例如：email,number等等。

:invalid

不合法的。

input:invalid {

border:2px solid red;

}

:optional

匹配可選輸入元素。

:required

匹配設(shè)置了“required”的元素。

input:required {

background-color: yellow;

}

:read-write

匹配可讀可寫(xiě)的元素。

:read-only

匹配設(shè)置了“readonly”的元素。

input:read-only {

background-color: yellow;

}

readonly 和 disabled 可以實(shí)現(xiàn)同樣的功能，禁止用戶輸入和更改。

:out-of-range

匹配設(shè)置范圍且值范圍超出范圍的元素。

input:out-of-range {

border:2px solid red;

}

:in-range

匹配在設(shè)置值范圍內(nèi)的元素。

:checked

匹配被選中的元素。

父子及排序關(guān)系相關(guān)

先說(shuō)一下常用于 p 的：

:first-letter

第一個(gè)字母，一般用于實(shí)現(xiàn)首字母大寫(xiě)。

:first-line

選取第一行。

比較通用的

:before

在元素之前插入內(nèi)容。

:after

在元素之后插入內(nèi)容。

示例

p:before {

content:"Read this -";

}

之前之后是指元素內(nèi)部的前面和后面。

::before

xxxx

::after

上面幾個(gè)是CSS1或2開(kāi)始支持的，下面的除了:first-child 是CSS2開(kāi)始的，其余的都是CSS3偽類(lèi)。

:root

選擇文檔的根元素，基本就是 標(biāo)簽。

:empty

沒(méi)有任何子級(jí)(包括文本內(nèi)容)的元素。

父子關(guān)系偽類(lèi)有兩種，一種是*-type 的，作用于父元素，另一種是*-child的，作用于子元素，還是看例子好理解。

:first-of-type

選取一個(gè)元素的父元素的第一個(gè)這個(gè)元素。

HTML文檔

This is a heading

The first paragraph.

The second paragraph.

The third paragraph.

The fourth paragraph.

CSS樣式

p:first-of-type {

background:#ff0000;

}

第一個(gè) p 標(biāo)簽將被設(shè)置背景色。p 的父元素是body,body的第一個(gè)p元素被選中。

:last-of-type

這個(gè)元素的父元素的最后一個(gè)這個(gè)元素被選中。

:only-of-type

這個(gè)元素的父元素只有一個(gè)這個(gè)元素，可以有其他元素不影響，唯一的這個(gè)元素被選中。

:nth-of-type(n)

這個(gè)元素的父元素的第n個(gè)元素被選中。

n 可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。

數(shù)字：從1開(kāi)始，代表第一個(gè)元素

關(guān)鍵字：奇數(shù) odd 偶數(shù) even

表達(dá)式：公式(an+b) a 代表一個(gè)循環(huán)的大小，n是計(jì)數(shù)器(從0開(kāi)始)，b是偏移量。

示例

tr:nth-of-type(2n+1) {

background:#ff0000;

}

奇數(shù)行(1,3,5,7...)設(shè)置背景。

:nth-last-of-type(n)

從后往前計(jì)算。

說(shuō)完 type 該說(shuō) child 了。

:first-child

這個(gè)是CSS2開(kāi)始有的偽類(lèi)選擇器，選取這個(gè)元素的第一個(gè)子元素。

示例

ul:first-child {

color: blue;

}

讓ul的第一個(gè)li的字體為藍(lán)色。

:last-child

最后一個(gè)子元素。

:nth-child(n)

第幾個(gè)子元素，n配置同上。

:nth-last-child(n)

從后開(kāi)始找子元素。

還剩下幾個(gè)，單獨(dú)列出來(lái)吧。

其他

:lang(language)

選取lang屬性的起始值為language的元素。

:not(selector)

選擇器的取反，這個(gè)很好理解。

示例

:not(a) {

color: black;

}

所有的非a標(biāo)簽。

::selection

匹配元素中被用戶選中或處于高亮狀態(tài)的部分。

示例

::selection {

color:#ff0000;

background-color:blue;

}

鼠標(biāo)拉選中的部分字體設(shè)置為紅色，背景設(shè)置為藍(lán)色。

后續(xù)會(huì)再跟進(jìn)和補(bǔ)充一些東西，先發(fā)這些吧。

總結(jié)

以上是生活随笔為你收集整理的css选择器按功能分,CSS 选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。