轉------詳解CSS選擇器、優先級與匹配原理

時間 2019-11-07

原文原文鏈接

做爲一個Web開發者，掌握必要的前臺技術也是很重要的，特別是在遇到一些實際問題的時候。這裏給你們列舉一個例子：css

給一個p標籤增長一個類（class），但是執行後該class中的有些屬性並無起做用。經過Firebug查看，發現沒有起做用的屬性被覆蓋了。這個時候忽然意識到了CSS選擇器的優先級問題，這裏就CSS選擇器的優先級問題作了一些總結。html

選擇器種類前端

嚴格來說，選擇器的種類能夠分爲三種：標籤名選擇器、類選擇器和ID選擇器。而所謂的後代選擇器和羣組選擇器只不過是對前三種選擇器的擴展應用。而在標籤內寫入style=""的方式，應該是CSS的一種引入方式，而不是選擇器，由於根本就沒有用到選擇器。而通常人們將上面這幾種方式結合在一塊兒，因此就有了5種或6種選擇器了。瀏覽器

三種基本的選擇器類型字體

語法以下：spa

◆標籤名選擇器，如：p{}，即直接使用HTML標籤做爲選擇器。firefox

◆類選擇器，如.polaris{}。code

◆ID選擇器，如#polaris{}。orm

注意，ID選擇器跟類選擇器有很大的不一樣：一個頁面內不能出現相同的ID；再就是ID也是後臺開發人員會常常用的，因此前端開發人員應該儘可能少的使用。固然跟後臺人員的工做配合十分嫺熟以後，這些都不會成爲限制。htm

擴展選擇器

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

◆羣組選擇器，如div,span,img{}，羣組選擇器其實是對CSS的一種簡化寫法，只不過把有相同定義的不一樣選擇器放在一塊兒，省了不少代碼。

選擇器的優先級別

瞭解了各類選擇器後，還有一個重要的知識點就是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代碼儘可能簡潔美觀。一般：

一、最經常使用的選擇器是類選擇器。

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

三、極少的狀況下會用ID選擇器，固然不少前端開發人員喜歡header，footer，banner，conntent設置成ID選擇器的，由於相同的樣式在一個頁面裏不可能有第二次。

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

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

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

後代選擇器的定位原則

在這裏介紹一下對於後代選擇器，瀏覽器是如何查找元素的呢？

瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。好比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。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。