css選擇器有多少種

這篇文章主要介紹css選擇器有多少種，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

目前創(chuàng)新互聯(lián)已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、道里網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、元素選擇器

最常見(jiàn)的css選擇器當(dāng)屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h3,span,a,p乃至html。

用法十分簡(jiǎn)單，例如：

html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h3 {background-color: red;}

以上css代碼會(huì)對(duì)整個(gè)文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時(shí)添加灰色背景；對(duì)文檔中所有h3元素添加紅色背景。

通過(guò)上面的例子也可以看出css的基本規(guī)則結(jié)構(gòu)：由選擇器和聲明塊組成。每個(gè)聲明塊中包含一個(gè)或多個(gè)聲明。每個(gè)聲明的格式為：屬性名 ： 屬性值。如下圖所示：

每條聲明以分號(hào)”;”結(jié)尾。如果在一個(gè)聲明中使用了不正確的屬性值，或者不正確的屬性，則該條聲明會(huì)被忽略掉。另外請(qǐng)注意不要忘記每條聲明后面的分號(hào)。

我們舉個(gè)不正確的例子：

p { background-color: red
    font-family: 黑體;
    wordsize: 20px;
    float: left;
  }

上面的例子第一條聲明漏掉了分號(hào)，以上聲明塊會(huì)被解析為：

p {  background-color: red font-family: 黑體;
     wordsize: 20px;
     float: left;   
  }

red font-family: 黑體整個(gè)會(huì)被解析為background-color的屬性值，這當(dāng)然不是一個(gè)合法的屬性值，該條聲明將會(huì)被忽略掉。另外第二條聲明使用了不正確的屬性名wordsize，該條聲明也將會(huì)忽略掉，結(jié)果只會(huì)正確處理第三條聲明，等價(jià)于：

p {float: left;}

此外，我們也可以同時(shí)對(duì)多個(gè)html元素進(jìn)行聲明：

h2, h3, h4, h5, h6, h7, p {font-family: 黑體;}

這樣會(huì)將文檔中所有的h2~h7以及p元素字體設(shè)置為”黑體”。

如果我們希望一鍋粥地選取所有的元素，可以使用通配符”*”：

* { font-size: 20px;}

這樣所有的元素都將被選中，雖然font-size屬性對(duì)于某些元素是無(wú)效的，那么它將被忽略。

2、類選擇器

(1)單類選擇器

單純的元素選擇器似乎還過(guò)于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內(nèi)容，例如稿件的截至日期。問(wèn)題在于我們不能確定稿件的截至日期將會(huì)出現(xiàn)在哪種元素中，或者它可能出現(xiàn)在多種不同的元素中。這個(gè)時(shí)候，我們可以考慮使用類選擇器(class selector)。

要使用類選擇器我們需要首先對(duì)文件元素添加一個(gè)class屬性，比如截至日期可能會(huì)出現(xiàn)在以下元素中:

<p class="deadline">...</p>
<h3 class="deadline">...</h3>

這樣我們就可以用以下方式使用類選擇器了：

p.deadline { color: red;}
h3.deadline { color: red;}

點(diǎn)號(hào)”.”加上類名就組成了一個(gè)類選擇器。以上2個(gè)選擇器會(huì)選擇所有包含”deadline”類的p元素和h3元素。而其余包含該屬性的元素則不會(huì)被選中。

如果我們省略.deadline前面的元素名，那么所有包含該類的元素都將被選中：

.deadline { color: red;}

通常情況下，我們會(huì)組合使用以上2者得到更加有趣的樣式：

.deadline { color: red;}
span.deadline { font-style: italic;}

以上代碼首先會(huì)對(duì)所有的包含deadline的元素字體設(shè)置為紅色，同時(shí)會(huì)對(duì)span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在<span></span>中就可以了。

(2)多類選擇器

在實(shí)踐的做法中，元素的calss屬性可能不止包含一個(gè)單詞，而是一串單詞，各個(gè)單詞之間用空格隔開(kāi)。

比如某些元素包含一個(gè)”warning”類，某些元素包含一個(gè)”important”類，某些元素同時(shí)包含”warning important”類。屬性名出現(xiàn)的順序沒(méi)有關(guān)系：

class = "warning important"
class = "important warning"

以上2者是等價(jià)的。

我們希望包含warning類的元素有一個(gè)醒目的紅色字體，包含important屬性的元素有一個(gè)加粗的字體顯示，而同時(shí)包含以上2中屬性的元素另外擁有一個(gè)藍(lán)色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：

.warning { color: red;}
.important { font-weight: bold;}
.warning.important { background: blue;}

當(dāng)然，第三條你也可以寫成：

.important.warning { background: blue;}

和詞序沒(méi)有關(guān)系。

說(shuō)明一下，.warning會(huì)匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。而.important.warning會(huì)匹配所有同時(shí)包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們?cè)陬惲斜碇谐霈F(xiàn)的順序，只要其中含有這2個(gè)屬性，則會(huì)被選擇進(jìn)來(lái)！

同樣地，多于多類選擇器，在前面加上元素名，則會(huì)匹配包含指定類名的指定元素，例如：

p.warning.important {}

將會(huì)匹配同時(shí)包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會(huì)被選中。

3、ID選擇器

ID選擇器和類選擇器有些類似，但是差別又十分顯著。

首先一個(gè)元素不能像類屬性一樣擁有多個(gè)類，一個(gè)元素只能擁有一個(gè)唯一的ID屬性。其次一個(gè)ID值在一個(gè)HTML文檔中只能出現(xiàn)一次，也就是一個(gè)ID只能唯一標(biāo)識(shí)一個(gè)元素(不是一類元素，而是一個(gè)元素)。

類似類屬性，在使用ID選擇器前首先要在元素中添加ID屬性，例如：

<p id="top-para">...</p>
<p id="foot-para">...</p>

使用ID選擇器的方法為井號(hào)”#”后面跟id值?，F(xiàn)在我們使用id選擇器選擇以上2個(gè)p元素如下：

#top-para {}
#foot-para {}

這樣我們就可以對(duì)以上2個(gè)段落進(jìn)行需要的操作了。正因?yàn)镮D選擇器的唯一性，也使其用法變得相對(duì)簡(jiǎn)單。

4、屬性選擇器

屬性選擇器在css2中引入，使我們可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。下面分別來(lái)說(shuō)明：

(1)簡(jiǎn)單屬性選擇器

簡(jiǎn)單的屬性選擇器可以使我們根據(jù)一個(gè)元素是否包含某個(gè)屬性來(lái)做出選擇。使用方法為:

元素名[屬性名] 或 *[屬性名]

比如我們希望選擇帶有alt屬性的所有img元素：

img[alt] { ...}

選擇帶有title屬性的所有元素：

*[title] { ...}

同類選擇器類似，我們也可以根據(jù)多個(gè)屬性信息進(jìn)行選擇，例如同時(shí)擁有href和title的a元素：

a[href][title] { ...}

組合使用類選擇器使我們的選擇更加富于靈活性。

(2)具體屬性值選擇器

如果我們希望更加精確地根據(jù)屬性值來(lái)選擇元素，我們可以在簡(jiǎn)單的屬性選擇器中指定屬性的值。最簡(jiǎn)單的我們希望找到href屬性值為http://www.baidu.com的錨元素：

a[href="http://www.baidu.com"] { font-weight: bold;}

要特別注意的是，這里的具體值匹配實(shí)質(zhì)上是一個(gè)字符串匹配，所以在這里對(duì)于class屬性而言，詞條的順序是有關(guān)系的！

p[class="warning important"] { ...}

將不會(huì)匹配到<p class="important warning"></p>，也不會(huì)匹配到<p class="warning important mini-type">，這里就是一個(gè)生硬的字符串匹配。

另外，想要同時(shí)匹配多個(gè)屬性的值也是可以的：

p[class="warning"][title="para"] { ...}

將匹配到類為warning(僅有warning)，title屬性為para的p元素。

(3)部分屬性值選擇器

根據(jù)屬性值來(lái)匹配元素?zé)o疑比簡(jiǎn)單的屬性匹配更加精細(xì)化了，但是似乎有些精細(xì)化過(guò)頭了，字符串的完全匹配顯得過(guò)于生硬。比如我們希望選擇在一串屬性值中出現(xiàn)了某個(gè)關(guān)鍵字的元素，不妨再次以class屬性為例，我們希望選擇所有包含了warning類的p元素，屬性值匹配將無(wú)法做到，好在還是有辦法的，我們可以使用以下的部分值匹配選擇器：

p[class~="warning"] { ...}

該選擇器在等號(hào)”=”前面添加了一個(gè)波浪號(hào)~，含義為包含后面的字串的匹配。以上代碼將會(huì)選擇所有class屬性中包含”warning”的p元素。為了更加清楚地說(shuō)明問(wèn)題，它和以下的選擇器是等價(jià)的：

p.warning { ...}

當(dāng)然~=不僅僅只是用在class屬性上，這只是一個(gè)示例。

再比如說(shuō)，我們的文檔中包含一系列人物介紹的p元素：

<p title="intro 1">...</p>
<p title="intro 2">...</p>
<p title="intro 3">...</p>

我們可以使用以下的方式選擇所有人物簡(jiǎn)介p：

p[title~="intro"] { ...}

不過(guò)遺憾的是<p title="animal intro">也將會(huì)被選擇進(jìn)來(lái)，這是需要我們特別注意的地方。

關(guān)于部分值選擇器也有其局限性，它匹配的是由空格分隔的單詞，如果我們將上面的p寫成下面的樣子就會(huì)匹配失敗：

<p title="intro-1">...</p>
<p title="intro-2">...</p>
<p title="intro-3">...</p>

對(duì)于這種情況，我們可以使用子串匹配屬性選擇器。規(guī)則如下：

p[title^="intro"] {...}  //title以intro開(kāi)頭的p元素
p[title$="intro"] {...}  //title以intro結(jié)尾的p元素
p[title*="intro"] {...}  //title中包含"intro"子串的p元素

舉例來(lái)說(shuō)：

a[href*="google."] {...}

將包含所有鏈接中包含”google.”的a元素。

p[title$="y"] {...}

將包含以下所有p元素：

<p title="cloudy">...</p>
<p title="snowy">...</p>
<p title="rainy">...</p>

可以看出部分值屬性選擇器的功能是十分強(qiáng)大的。

5、派生選擇器

派生選擇器，乍一看名字不知所云，它又名上下文選擇器，它是使用文檔DOM結(jié)構(gòu)來(lái)進(jìn)行css選擇的。DOM結(jié)構(gòu)在此不再贅述了，但為了更加清楚地說(shuō)明問(wèn)題，我們這里給出一個(gè)DOM樹(shù)作為參考：

(1)后代選擇器(descendant selector)

如上圖，如果想要選擇body元素的所有l(wèi)i子元素，方法如下：

body li { ...}

這里會(huì)選擇所有的li后代，也就是圖中的body下的所有l(wèi)i，不論他們之間相隔的代數(shù)有多少。

同理，如果想要選擇h2元素下的span，可以使用以下代碼：

h2 span { ...}

如果我們要選擇擁有warning類的元素的li后代，可以使用下面的方法：

.warning li { ...}

當(dāng)然，如果希望只選擇擁有warning類的p元素的li后代，可以寫作：

p.warning li { ...}

由上面的例子不難看出，后代選擇器的規(guī)則就是用空格連接2個(gè)或多個(gè)選擇器?？崭竦暮x為：…的后代。多個(gè)選擇器的情況如下：

ul li li { ...}

這樣，就會(huì)選擇所有ul下包含在li元素下的所有l(wèi)i元素了，聽(tīng)起來(lái)十分拗口，參考我們的DOM樹(shù)，會(huì)選擇到文檔樹(shù)種最后一排li元素。

(2)子元素選擇器(child selector)

子元素選擇器和后代選擇器不同，它只能選擇某元素的直接后代，不能跨代選取，用法如下：

ul > li { ...}

兩個(gè)子元素中間用一個(gè)大于號(hào)>連接。上面的代碼會(huì)選擇到所有ul元素的直接li子元素。對(duì)應(yīng)到DOM樹(shù)中，所有的li元素都會(huì)被選中，原因是圖中所有的li元素都是ul的子元素。

但是，以下代碼將不會(huì)選中任何元素：

h2 > span { ...}

由于span是h2的”孫子元素”，h2沒(méi)有直接的span子元素，因而上面的代碼將不會(huì)選到任何結(jié)果。其他方面和后代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。

(3)相鄰兄弟選擇器(Adjacent sibling selector)

相鄰兄弟選擇器，故名思意將會(huì)選取某個(gè)元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實(shí)際上選取的是緊跟在后面的兄弟元素。

相鄰兄弟選擇器在實(shí)踐中有比較不錯(cuò)的應(yīng)用，例如，你想在一個(gè)h3標(biāo)題后面的段落應(yīng)用某種獨(dú)到的樣式或者希望在某類p段落后的table上添加一個(gè)額外的邊距等等。

它的用法如下：

li + li { ...}

以上代碼會(huì)選擇所有作為li相鄰元素的li元素，聽(tīng)起來(lái)又有點(diǎn)拗口，參考DOM樹(shù)，它會(huì)選擇除了排在第一個(gè)li元素的其余4個(gè)li元素，因?yàn)?個(gè)排在第1的li元素沒(méi)有更靠前的兄弟元素來(lái)選擇它。

再比如：

h2 + p { ...}

會(huì)選擇所有緊跟h2后面的p兄弟元素。

h2.warning + p { ...}

會(huì)選擇所有有用warning類的h2元素后面緊跟的p兄弟元素。

(4)幾種派生選擇器的結(jié)合使用

實(shí)際上，以上介紹的幾種派生選擇器可以結(jié)合使用，看下面的例子：

html > body li.warning + li { ...}

上面的選擇器含義為：html元素的body子元素中，所有擁有warning類的li元素的相鄰兄弟元素。

以上是“css選擇器有多少種”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：css選擇器有多少種
網(wǎng)頁(yè)網(wǎng)址：http://bm7419.com/article42/igojec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、小程序開(kāi)發(fā)、、微信公眾號(hào)、網(wǎng)頁(yè)設(shè)計(jì)公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)