詳解CSS選擇器

2021-09-09 03:39:33 字數 2139 閱讀 9189

選擇器的優先級別

1 2

3 beijixing

4 5

6 polaris

7 8

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

9 .polaris span

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

10 .beijixing

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

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

一般而言,選擇器越特殊,它的優先順序越高。也就是選擇器指向的越準確,它的優先順序就越高。通常我們用1表示標籤名選擇器的優先順序,用10表示類選擇器的優先順序,用100標示id選擇器的優先順序。

比如上例當中 .polaris span 的選擇器優先順序是 10 + 1 也就是11;而 .polaris 的優先順序是10;瀏覽器自然會顯示紅色的字。

理解了這個道理之後下面的優先順序計算自是易如反掌:

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

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

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

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

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

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

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

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

14 polaris

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

後代選擇器的定位原則

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

瀏覽器css匹配不是從左到右進行查詢,而是從右到左進行查詢。比如div#divbox p span.red,瀏覽器的查詢順序如下:

先查詢html中所有class='red'的span元素,找到後,再查詢其父輩元素中是否有p元素,再判斷p的父元素中是否有id為divbox的div元素,如果都存在則匹配上。

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

1516 div#divbox p span.red

17 >

181920 s1

21 s2

22 s3

23 s4

2425如果按從左到右查詢,哪會先查找到很多不相關的p和span元素。而如果按從左到右的方式進行查詢,則首先就查詢到的元素。firefox稱這種查詢方式為key selector(關鍵字查詢),所謂的關鍵字就是樣式規則中最後(最右邊)的規則,上面的key就是span.

red。

簡潔、高效的css

所謂高效的css就是讓瀏覽器在查詢style匹配的元素的時候盡量進行少的查詢,下面列出一些我們常見的寫css犯一些低效錯誤:

◆不要在id選擇器前使用標籤名

一般寫法:div#divbox

更好寫法:#divbox

解釋: 因為id選擇器是唯一的,加上div反而增加不必要的匹配。

◆不要再class選擇器前使用標籤名

一般寫法:span.red

更好寫法:.red

解釋:同第一條,但如果你定義了多個.red,而且在不同的元素下是樣式不一樣,則不能去掉,比如你css檔案中定義如下:

26 p.red

27 span.red

如果是這樣定義的就不要去掉,去掉後就會混淆,不過建議最好不要這樣寫

◆盡量少使用層級關係

一般寫法:#divbox p .red

更好寫法:.red

◆使用class代替層級關係

一般寫法:#divbox ul li a

更好寫法:.block

CSS書寫方法一選擇器詳解

問幫手給我寫信 rss訂閱郵件訂閱 308人關注 承諾 阿邦網堅持寫作客觀獨立的立場,永遠不受金錢影響。秉承為人民生活服務的宗旨,與您分享特邀幫手的經驗和知識,幫您解決生活問題,提高生活品質。本文系阿邦網獨家稿件,未經許可,任何 和個人,不得全部或部分 違者必究。其實這節的內容應該叫做css語法,但...

量子資料選擇器設計

一種新型的量子資料選擇器設計 摘要 量子細胞自動機 quantum cellular automaton,qca 是一種基於細胞自動 機結構利用庫侖相互作用的量子器件,是一種具有邏輯運算功能的自動機。應用量子元胞自動機的基本邏輯門如多路選擇器 即資料選擇器 反相器等可以實現各種各樣的邏輯電路。目前,...

jQuery選擇器的工作原理和優化

至於有那些選擇器,在幫助手冊中都有,自己去看,這篇主要是分析他的工作原理,而優化我們寫的選擇器,尤其在頁面內容很多的情況下,更應該需要優化。下邊就言歸正傳。每次申明乙個jquery物件的時候,返回的是jquery.prototype.init 物件,很多人就會不明白,init明明是jquery.fn...