CSS選擇器種類 優先順序與匹配原理詳解

2022-09-25 07:24:11 字數 2250 閱讀 3550

給乙個p標籤增加乙個類(class),可是執行後該class中的有些屬性並沒有起作用。通過firebug檢視,發現沒有起作用的屬性被覆蓋了。這個時候突然意識到了css選擇器的優先順序問題,這裡就css選擇器的優先順序問題做了一些總結。

51cto推薦閱讀:巧妙地使用css選擇器

選擇器種類

嚴格來講,選擇器的種類可以分為三種:標籤名選擇器、類選擇器和id選擇器。而所謂的後代選擇器和群組選擇器只不過是對前三種選擇器的擴充套件應用。而在標籤內寫入style=""的方式,應該是css的一種引入方式,而不是選擇器,因為根本就沒有用到選擇器。而一般人們將上面這幾種方式結合在一起,所以就有了5種或6種選擇器了。

三種基本的選擇器型別

語法如下:

◆標籤名選擇器,如:p{},即直接使用html標籤作為選擇器。

◆類選擇器,如.polaris{}。

◆id選擇器,如#polaris{}。

注意,id選擇器跟類選擇器有很大的不同:乙個頁面內不能出現相同的id;再就是id也是後台開發人員會經常用的,所以前端開發人員應該盡量少的使用。當然跟後台人員的工作配合十分嫻熟之後,這些都不會成為限制。

擴充套件選擇器

◆後代選擇器,如.polaris span img{},後代選賊器實際上是使用多個選擇器加上中間的空格來找到具體的要控制標籤。

◆群組選擇器,如div,span,img{},群組選擇器實際上是對css的一種簡化寫法,只不過把有相同定義的不同選擇器放在一起,省了很多**。

選擇器的優先級別

了解了各種選擇器後,還有乙個重要的知識點就是css選擇器的優先順序。這也就是為什麼polaris會遇到文章開頭的問題。舉個簡單的例子:

複製**

**如下:

beijixing

polaris

如果已經把.polaris下面span內的字型設定成紅色:

.polaris span

這時,如果要改變.beijixing的顏色為藍色,用下面的命令是不能實現的:

複製**

**如下:

.beijixing

出現這種情況就是因為後乙個命令的優先順序不夠,兩條相互衝突的樣式設定,瀏覽器只會執行優先順序較高的那個。

那麼選擇器的優先順序是怎麼規定的呢?

一般而言,選擇器越特殊,它的優先順序越高。也就是選擇器指向的越準確,它的優先順序就越高。通常我們用1表示標籤名選擇器的優先順序,用10表示類選擇器的優先順序,用100標示id選擇器的優先順序。比如上例當中 .polaris span 的選擇器優先順序是 10 + 1 也就是11;而 .polaris 的優先順序是10;瀏覽器自然會顯示紅色的字。理解了這個道理之後下面的優先順序計算自是易如反掌:

div.test1 .span var 優先順序 1+10 +10 +1

span#*** .songs li 優先順序1+100 + 10 + 1

#*** li 優先順序 100 +1

對於什麼情況下使用什麼選擇器,用不同選擇器的原則是:第一:準確的選到要控制的標籤;第二:使用最合理優先順序的選擇器;第三:html和css**盡量簡潔美觀。通常:

1、最常用的選擇器是類選擇器。

2、li、td、dd等經常大量連續出現,並且樣式相同或者相類似的標籤,我們採用類選擇器跟標籤名選擇器結合的後代選擇器 .xx li/td/dd {} 的方式選擇。

3、極少的情況下會用id選擇器,當然很多前端開發人員喜歡header,footer,banner,conntent設定成id選擇器的,因為相同的樣式在乙個頁面裡不可能有第二次。

在這裡不得不提使用在標籤內引入css的方式來寫css,即:

polaris

這時候的優先順序是最高的。我們給它的優先順序是1000,這種寫法不推薦使用,特別是對新手來說。這也完全違背了內容和顯示分離的思想。div+css的優點也不能再有任何體現。

後代選擇器的定位原則

在這裡介紹一下對於後代選擇器,瀏覽器是如何查詢元素的呢?

瀏覽器css匹配不是從左到右進行查詢,而是從右到左進行查詢。比如div#divbox p span.red,瀏覽器的查詢順序如下:先查詢html中所有class='red'的span元素,找到後,再查詢其父輩元素中是否有p元素,再判斷p的父元素中是否有id為divbox的div元素,如果都存在則匹配上。

瀏覽器從右到左進行查詢的好處是為了盡早過濾掉一些無關的樣式規則和元素。比如如下html和css:

複製**

**如下:

www.cppcns.comyle>

div#divbox p span.red

>

CSS選擇器 優先順序與匹配原理

polaris不是前台開發人員,然而作為乙個web開發者,掌握必要的前台技術也是很重要的。說實話,polaris對前台技術還是蠻感興趣的,只是一直沒有用心系統的學過,所以了解的知識有點雜。這篇文章是polaris通過網上的一些知識結合自己的問題做的一些總結,一來當作筆記,二來希望能夠對初學者有點幫助...

CSS選擇器 優先順序與匹配原理

polaris不是前台開發人員,然而作為乙個web開發者,掌握必要的前台技術也是很重要的。說實話,polaris對前台技術還是蠻感興趣的,只是一直沒有用心系統的學過,所以了解的知識有點雜。這篇文章是polaris通過網上的一些知識結合自己的問題做的一些總結,一來當作筆記,二來希望能夠對初學者有點幫助...

CSS選擇器 優先順序與匹配原理

polaris不是前台開發人員,然而作為乙個web開發者,掌握必要的前台技術也是很重要的。說實話,polaris對前台技術還是蠻感興趣的,只是一直沒有用心系統的學過,所以了解的知識有點雜。這篇文章是polaris通過網上的一些知識結合自己的問題做的一些總結,一來當作筆記,二來希望能夠對初學者有點幫助...