CSS基礎學習十一：選擇器的優先級 · Web前端HTML+CSS+JS初級入門

在CSS基礎學習的篇章中，從第四篇博客開始說選擇器，到昨天基本已經說完了。今天我們總結一下，選擇器作用：告知瀏覽器需要設置哪個dom元素的樣式。最后來說說選擇器一個重要的問題，選擇器的優先級。判斷優先級的方法就是嘗試！！！ ### 一，簡單選擇器的優先級簡單的選擇器包括我們在第四篇，第五篇，第六篇博客的元素選擇器(標簽選擇器)，類選擇器和id選擇器。我們來試驗： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器優先級</title> <style type="text/css"> /*標簽選擇器的渲染紅色*/ div{ background-color:#FF0000; width:900px; height:400px; } /*類選擇器的渲染藍色*/ .test{ background-color:#0000FF; width:900px; height:300px; } /*id選擇器的渲染紫色*/ #test{ background-color:#FF00FF; width:900px; height:200px; } </style> </head> <body> <div id="test" class="test"></div> </body> </html> ~~~ 運行的結果為：id選擇器的優先級最高。 ![](https://box.kancloud.cn/2016-04-28_57215597290bc.jpg) 注釋掉id選擇器后的結果為：類選擇器的優先級居其次。 ![](https://box.kancloud.cn/2016-04-28_572155973d1d9.jpg) 因此這三個簡單選擇器的優先級順序為：HTML標簽屬性>id選擇器>類選擇器>元素選擇器 ### 二，同類型選擇器的優先級同類型：指的是相同類型的選擇器，理論上優先級是一樣的。比如：div和p。.btn和.button。#header和 #footer，它們的優先級是相同的。但是當同類型的選擇器作用到相同的HTML標簽上的時候優先級就不一樣了。我們繼續試驗： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器優先級</title> <style type="text/css"> /*test類選擇器的渲染淺綠色*/ .test{ background-color:#00FF00; width:900px; height:200px; } /*test1類選擇器的渲染淺藍色*/ .test1{ background-color:#00FFFF; width:900px; height:200px; } </style> </head> <body> <div class="test test1"></div> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155974c98a.jpg) 我們嘗試的結果為：CSS規則寫在最后面的生效！！如果這還不能信服我們再來嘗試< div class="test1 test">< /div>有什么不一樣的效果？ ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器優先級</title> <style type="text/css"> /*test類選擇器的渲染淺綠色*/ .test{ background-color:#00FF00; width:900px; height:200px; } /*test1類選擇器的渲染淺藍色*/ .test1{ background-color:#00FFFF; width:900px; height:200px; } </style> </head> <body> <div class="test test1"></div> <hr/> <div class="test1 test"></div> </body> </html> ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155975feea.jpg) 最終我們得出的結論依然是：同類型的選擇器，CSS規則寫在最后面的生效！ ### 三，選擇器的優先級 CSS選擇器組合出很多復雜的選擇器規則，那么我們就不能像簡單的選擇器那樣一個一個嘗試。下面我們介紹一個很實用的判斷優先級的方法。判斷優先級：我們約定?id選擇器的權重為100，類選擇器權重為10，標簽選擇器權重為1。一個復雜的選擇器的權重等于所有選擇器的權重之和。一般，選擇器越特殊，優先級(權重)越高。我們先來看兩個復雜的選擇器規則：第一個選擇器的權重為：1+10+10+1=22 ? ? ?div.test .item span{ ? ? ?background-color:#00FF00; ? ? ?} 第二個選擇器的權重為：100+1+1=102 ? ? ?#test div span{ ? ? ?background-color:#FF0000; ? ? ?}? 從我們約定的規則來看，顯然是第二個生效！ ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器優先級</title> <style type="text/css"> /*第一個選擇器渲染的是綠色*/ div.test .item span{ background-color:#00FF00; } /*第一個選擇器渲染的是紅色*/ #test div span{ background-color:#FF0000; } </style> </head> <body> <div id="test" class="test"> <div class="item"> <span>12345</span> </div> </div> </body> </html> ~~~ 運行的結果為與我們的理論是一致的！ ![](https://box.kancloud.cn/2016-04-28_572155977158a.jpg) 那么我們可能會有一個疑問：同樣的權重，那個選擇器起作用呢？從一系列的理論和試驗我們可以得出這與同類型選擇器的優先級問題相似，我們還是能輕易的得出結論：同樣的權重要選擇順序最后的生效。 ### 四，!important 樣式最高優先級：無視優先級，在樣式的一條聲明的最后分號前加上，使該樣式起作用。我們還是來嘗試： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS選擇器優先級</title> <style type="text/css"> /*元素選擇器渲染的是紅色*/ div{ color:#0000FF; } /*類選擇器渲染的是藍色*/ .test{ color:#FF0000; } </style> </head> <body> <div class="test">攻城課堂</div> </body> </html> ~~~ 首先運行的結果我們肯定知道是紅色，那么我們在標簽選擇器后面!important，我們再來運行結果看看？ ~~~ /*元素選擇器渲染的是紅色*/ div{ color:#0000FF!important; } ~~~ 運行的結果為： ![](https://box.kancloud.cn/2016-04-28_572155978324a.jpg) 關于選擇器的優先級我也就了解了這些，CSS選擇器就告一段落了！！ ? ? ?