CSS權重關系及問題剖析

發(fā)布時間：2012-12-25 11:41:45 作者：佚名

看到過一篇關于CSS 的文章，其中說到：對于類似 li#first 這樣的選擇器，由于使用 id 就已經(jīng)可以確定元素了，沒有必要再寫上前面的 li, 直接寫上 #first 這樣的 id 選擇器就可以了,感覺還不錯，于是進行測試，與大家分享下CSS權重關系與涉及到的問題

id 的選擇器為什么要這么寫 li#first？

一. 一個疑問？
看到過一篇關于 CSS 的文章，其中說到：對于類似 li#first 這樣的選擇器，由于使用 id 就已經(jīng)可以確定元素了，沒有必要再寫上前面的 li, 直接寫上 #first 這樣的 id 選擇器就可以了。聽起來說得不錯，簡單測試一下也沒有問題。

可是，我們經(jīng)常看到帶有元素名稱的選擇器，例如，在微軟的項目模板中就有大量的帶有元素名稱的選擇器，如果沒有用的話，為什么要這樣寫呢？

復制代碼

代碼如下:

ul#navlist
{
float: right;
}

ul#navlist li
{
display: inline;
}

二. 問題出現(xiàn)了！
寫一個簡單的菜單，使用 ul 和 li 實現(xiàn)，菜單項之間使用邊框來實現(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>

使用下面的樣式表，首先通過為所有的超級鏈接增加一個左邊框來畫出間隔的虛線，然后將第一個菜單項的左邊框去掉，我的第一個樣式使用了 .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;
}

看一下效果，完全沒有反應。

還有的地方說 id 選擇器的級別比較高，那么將類改成 id 。

復制代碼

代碼如下:

將樣式表也進行相應的修改。

復制代碼

代碼如下:

#first a
{
border: none;
}

可是結果呢？巋然不動！

用火狐的 firebug 看一看，被忽略了。

三. 探源

為什么我的樣式被秒殺了？

網(wǎng)上有大量的文章，但是說法并不一致，有的說要考慮三個級別，可是也有的說需要考慮四個級別，但是總的方向大致是關于層疊的。

不如到 W3C 的網(wǎng)站上看一個究竟。相關的標準在這個頁面可以看到，目前為止的 CSS 標準有三個: CSS1, CSS2, 以及 CSS3。

CSS1 是最早的標準，其中關于層疊順序的描述在這里，還提供了一個簡單的示例進行說明。

復制代碼

代碼如下:

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)一次，計數(shù)一次，按照先 a 組進行比較，相同的情況下，使用 b 組進行比較，最后是 c 組。什么選擇器的優(yōu)先級別高，什么選擇器提供的樣式有效。比如在上面的例子中，第 5 組使用 id 的級別最高，所以，這組的樣式設置生效，而其他的設置將會被忽略掉。

在 CSS2 中，又增加了關于行內說明 style 的組，所以參與比較的組成為了 4 組，其中 style 的優(yōu)先級別最高。同樣，在 CSS2 的標準說明中也提供了樣例。

復制代碼

代碼如下:

* {} /* 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 */

<style type="text/css">
#x97z { color: red }
</style>
<p id="x97z" style="color: green">
</p>

在這個示例中，style 的優(yōu)先級別最高，所以將會覆蓋掉通過 id 進行的設置，顏色為綠色。

四. 解決問題
通過上面的分析可以看到，僅僅提供選擇器并不足以能夠生效，還要看選擇器的優(yōu)先級別，在我們的問題中，即使使用 id 來選擇第一個菜單項：#first a ，包括了一個 id 和一個元素名，那么所得的優(yōu)先級別為：a=0, b=1, c=0, d=1
可是，通用的選擇器是這樣的：ul#navlist li a，優(yōu)先級中卻包括了一個 id, 還有 3 個元素名稱，所以優(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 組比較的時候就已經(jīng)超過了，看看是否已經(jīng)成功了！

還可以加上重要性說明，也可以解決。!important 必須寫在樣式與分號之間，每個樣式必須單獨聲明。

復制代碼

代碼如下:

#first a
{
border: none !important;
}

看來選擇器不是那么簡單呀！

Tag：CSS權重權重關系

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS權重關系及問題剖析

相關文章

最新評論

文章分類

大家感興趣的內容

最近更新的內容