CSS三种写法的优先级
在HTML文件中引入CSS樣式有三種方法：
我知道一般情況下使用外部樣式，減少代碼冗余，同時(shí)便于后期維護(hù)。但如果同時(shí)用三種方式引入相同的CSS樣式，誰的優(yōu)先級更高呢？
就做了個(gè)小測試：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"/> <title>css樣式優(yōu)先級</title> <link href="index.css" rel="stylesheet" type="text/css"/> <style type="text/css"> .box{background:red;border:1px solid black;width:100px;height:100px; } </style> </head> <body><div style="background:yellow;width:100px;height:100px;" class="box"></div> </body> </html>外部CSS樣式代碼：
.box{width:100px;height:100px;background:blue; }- 外部樣式：blue
- 內(nèi)頁樣式：red
- 行內(nèi)樣式：yellow
最后顯示的效果是：
把行內(nèi)CSS的背景樣式去掉后，顯示：
可見，CSS三種位置寫法的優(yōu)先級是：行內(nèi)樣式＞內(nèi)頁樣式＞外部樣式
?
感謝@我是攻城獅的提醒，去認(rèn)真看了CSS權(quán)重這個(gè)知識，明白了自己是走了歧途。
從CSS代碼存放位置看權(quán)重優(yōu)先級：內(nèi)嵌樣式 > 內(nèi)部樣式表 > 外聯(lián)樣式表。其實(shí)這個(gè)基本可以忽視之，大部分情況下CSS代碼都是使用外聯(lián)樣式表。
從樣式選擇器看權(quán)重優(yōu)先級：important > 內(nèi)嵌樣式 > ID > 類 > 標(biāo)簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符。
- important的權(quán)重為1,0,0,0
- ID的權(quán)重為0,1,0,0
- 類的權(quán)重為0,0,1,0
- 標(biāo)簽的權(quán)重為0,0,0,1
- 偽類的權(quán)重為0,0,1,0
- 屬性的權(quán)重為0,0,1,0
- 偽對象的權(quán)重為0,0,0,1
- 通配符的權(quán)重為0,0,0,0
id 的選擇器為什么要這么寫 li#first？
一. 一個(gè)疑問？
看到過一篇關(guān)于 CSS 的文章，其中說到：對于類似 li#first 這樣的選擇器，由于使用 id 就已經(jīng)可以確定元素了，沒有必要再寫上前面的 li, 直接寫上 #first 這樣的 id 選擇器就可以了。聽起來說得不錯(cuò)，簡單測試一下也沒有問題。
可是，我們經(jīng)常看到帶有元素名稱的選擇器，例如，在微軟的項(xiàng)目模板中就有大量的帶有元素名稱的選擇器，如果沒有用的話，為什么要這樣寫呢？
ul#navlist {float: right; }ul#navlist li {display: inline; }二. 問題出現(xiàn)了！
寫一個(gè)簡單的菜單，使用 ul 和 li 實(shí)現(xiàn)，菜單項(xiàng)之間使用邊框來實(shí)現(xiàn)間隔線。
html 代碼如下：
<ul id="navlist"><li class="first"><a href="/" id="current">Home</a></li><li><a href="#">Store</a></li><li><a href="#">ShoppingCart</a></li><li><a href="#">Admin</a></li> </ul>使用下面的樣式表，首先通過為所有的超級鏈接增加一個(gè)左邊框來畫出間隔的虛線，然后將第一個(gè)菜單項(xiàng)的左邊框去掉，我的第一個(gè)樣式使用了 .first a。
| ul#navlist li { ????display: inline; } ?????????? ul#navlist li a { ????border-left: 1px?dotted?#8A8575; ????padding: 10px; ????margin-top: 10px; ????color: #8A8575; ????text-decoration: none; ????float: left; } ?????????? .first a { ????border: none; } |
?看一下效果，完全沒有反應(yīng)。
還有的地方說 id 選擇器的級別比較高，那么將類改成 id 。
| <li id="first"><a href="/"?id="current">Home</a></li> |
??將樣式表也進(jìn)行相應(yīng)的修改。
| #first a { ????border: none; } |
?可是結(jié)果呢？巋然不動(dòng)！
用火狐的 firebug 看一看，被忽略了。
三. 探源
為什么我的樣式被秒殺了？
網(wǎng)上有大量的文章，但是說法并不一致，有的說要考慮三個(gè)級別，可是也有的說需要考慮四個(gè)級別，但是總的方向大致是關(guān)于層疊的。
不如到 W3C 的網(wǎng)站上看一個(gè)究竟。相關(guān)的標(biāo)準(zhǔn)在?這個(gè)頁面?可以看到，目前為止的 CSS 標(biāo)準(zhǔn)有三個(gè): CSS1, CSS2, 以及 CSS3。
CSS1 是最早的標(biāo)準(zhǔn)，其中關(guān)于層疊順序的描述在?這里，還提供了一個(gè)簡單的示例進(jìn)行說明。
| LI??????????? {...}? /* a=0 b=0 c=1 -> specificity =?? 1 */ UL LI???????? {...}? /* a=0 b=0 c=2 -> specificity =?? 2 */ UL OL LI????? {...}? /* a=0 b=0 c=3 -> specificity =?? 3 */ LI.red????????{...}? /* a=0 b=1 c=1 -> specificity =? 11 */ UL OL LI.red??{...}? /* a=0 b=1 c=3 -> specificity =? 13 */ #x34y???????? {...}? /* a=1 b=0 c=0 -> specificity = 100 */ |
?
在 CSS1 中將優(yōu)先級分為三組，將 id 選擇器作為 a 組，類選擇器作為 b 組，元素名作為 c 組，每組中出現(xiàn)一次，計(jì)數(shù)一次，按照先 a 組進(jìn)行比較，相同的情況下，使用 b 組進(jìn)行比較，最后是 c 組。什么選擇器的優(yōu)先級別高，什么選擇器提供的樣式有效。比如在上面的例子中，第 5 組使用 id 的級別最高，所以，這組的樣式設(shè)置生效，而其他的設(shè)置將會(huì)被忽略掉。
CSS21 標(biāo)準(zhǔn)
在 CSS2 中，又增加了關(guān)于行內(nèi)說明 style 的組，所以參與比較的組成為了 4 組，其中 style 的優(yōu)先級別最高。同樣，在 CSS2 的標(biāo)準(zhǔn)說明中也提供了樣例。
| *???????????? {}? /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ ?li??????????? {}? /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ ?li:first-line {}? /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ?ul li???????? {}? /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ?ul ol+li????? {}? /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ ?h1?+ *[rel=up]{}? /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ?ul ol li.red??{}? /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ ?li.red.level??{}? /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ ?#x34y???????? {}? /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ ?style=""??????????/* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */<br><br> |
?
在這個(gè)示例中，style 的優(yōu)先級別最高，所以將會(huì)覆蓋掉通過 id 進(jìn)行的設(shè)置，顏色為綠色。
四. 解決問題
通過上面的分析可以看到，僅僅提供選擇器并不足以能夠生效，還要看選擇器的優(yōu)先級別，在我們的問題中，即使使用 id 來選擇第一個(gè)菜單項(xiàng)：#first a ，包括了一個(gè) id 和一個(gè)元素名，那么所得的優(yōu)先級別為：
a=0, b=1, c=0, d=1
可是，通用的選擇器是這樣的：ul#navlist li a，優(yōu)先級中卻包括了一個(gè) id, 還有 3 個(gè)元素名稱，所以優(yōu)先級別為：
a=0, b=1, c=0, d=3
所以我們的選擇器沒有比過通用的選擇器，悲劇發(fā)生了！
知道了原因，問題也就簡單了，提高我們選擇器的優(yōu)先級別，超過通用選擇器的優(yōu)先級就可以了，比如，我們可以寫成這樣：
| ul#navlist li#first a |
?
現(xiàn)在的優(yōu)先級是多少呢？
a=0, b=2, c=0, d=3
在 b 組比較的時(shí)候就已經(jīng)超過了，看看是否已經(jīng)成功了！
還可以加上重要性說明，也可以解決。!important 必須寫在樣式與分號之間，每個(gè)樣式必須單獨(dú)聲明。
| #first a { ????border: none?!important; } |
?看來選擇器不是那么簡單呀！
------------------------
感謝司徒正美的奉獻(xiàn)，轉(zhuǎn)載地址：http://www.cnblogs.com/rubylouvre/archive/2012/09/26/2524700.html
轉(zhuǎn)載于:https://www.cnblogs.com/qjqcs/p/5024016.html
總結(jié)
以上是生活随笔為你收集整理的CSS三种写法的优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语义化版本
- 下一篇： 谈谈一些有趣的CSS题目（十）-- 结构