CSS 匹配順序

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

使用CSS開發，因為有後代元素的存在，當已經有了父類（正確的是叫做後代，我就將錯就錯吧）元素的樣式，又定義了一個父子關係的樣式，那麼最終的樣式是用父類的還是父子類的？

直接寫一個運行下就知道結果了吧，答案我就不說了。

答案既然有了，那麼原因呢？

在一本書上看過寫的是從右至左，但是記不清書名了，我甚至將我所有的書翻了遍，但是沒找到，因為是電子書籍，搜尋不方便，看來我的習慣不是很好，看過的東西，很多的時候有一個大概印象，但是我是追求”正確“的人，希望有權威的解釋。

好記性不如爛筆頭，看來應該將自己看到的覺得有用的細節都記錄下來，也許是我太懶了，看來2013年有很多毛病要改呀！

讓一些事情變成一種慣性，而不是強迫自己，給自己順便培養幾個好習慣吧，2013年加油！

在搜尋引擎的協助下，我搜尋了關鍵字，找到了跟我看到的差不多的話語（出處：http://developer.51cto.com/art/201009/226852.htm）：

比如DIV#divBox p span.red{color:red;}，瀏覽器的尋找順序如下：先尋找html中所有class='red'的span元素，找到後，再尋找其父輩元素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。

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

<style>
DIV#divBox p span.red{color:red;}
</style>
<body>
<div id="divBox">
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class='red'>s4</span></p>
</div>
</body>

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

附錄：

選取器的優先順序別

瞭解了各種選取器後，還有一個重要的知識點就是CSS選取器的優先順序。這也就是為什麼polaris會遇到文章開頭的問題。舉個簡單的例子：

<div class="polaris">
<span class="beijixing">
beijixing
</span>
<span>
polaris
</span>
</div>

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

.polaris span {color:red;}

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

.beijixing {color:blue;}

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

那麼選取器的優先順序是怎麼規定的呢？

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

div.test1 .span var 優先順序 1+10 +10 +1
span#xxx .songs li 優先順序1+100 + 10 + 1
#xxx li 優先順序 100 +1

對於什麼情況下使用什麼選取器，用不同選取器的原則是：第一：準確的選到要控制的標籤；第二：使用最合理優先順序的選取器；第三：HTML和CSS代碼盡量簡潔美觀。通常：

1、最常用的選取器是類別選取器。

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

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

在這裡不得不提使用在標籤內引入CSS的方式來寫CSS，即：

<div style="color:red">polaris</div>

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More