CSS 的規則繼承和權重

路過 CSS specificity for poker players
這篇關於CSS 承繼規則的確不錯
CSS 是一種承繼的語言, 一個<a> 可以同時承繼兩個style
比如

a{color:#000;}
p a{color:#f00;}

那究竟瀏覽器要如何決定一個<a> 的顏色?
就是這一篇所述的內容了

這一篇用了撲克牌的比喻解釋, 簡單易明, 所以翻了一下,
但記得先要有基本的CSS 知識才可.

翻譯:
CSS 是由元素(element), class 和id 組成CSS 規則的
元素例如 div
class 例如 .sidenote 代表元素有一個屬性 class="sidenote"
id 例如 #navigation 代表元素有一個屬性 id="navigation"

單Aces 為最大:

最弱的規則是只有元素的規則

h1 p { font-size: 1em; }

Pseudo-elements, 例如 :first-line 也是元素級,
所以以下的規則是相同的權力

p:first-line a
div p a

在只有元素的規則內, 多元素代表高權力
會取代低權力的規則
因為我們都知道5 勝3
5個元素:

body div div h1 p

勝3個:
div h1 p

.

相同權力時:

如果有兩個相同權力的規則,
後出現的會勝出
這裡沒有一個好的撲克規則作比喻,
但在21點內, 莊在後, 也勝平手的

一對勝單Aces

就算一對的2 也會勝Aces.
同道理, 包含一個class 規則會勝任何多的元素規則

p.introduction
<code>
...或只是...
<code>
.introduction

...勝...
html body div div h2 p

還有, 一個class 規則不一定要是使用到最後一個的元素
這個規則一樣會勝過任何元素規則:

div.introduction p

也即是說只要有一個class 規則都會令你勝過所有只有元素的規則

當然, 多class 規則也勝少class:

div.content div.summary p.intro

...勝...
div.content div p.intro

Pseudo-classes 例如:link, :visited, :hover 是class 級
所以以下的規則是同權力:

div a:link
div a.friend

.

三條勝一對

三隻牌相同勝一對
有id 規則的 CSS 會勝任何class

#content img

...勝...
body div.wrapper div.summary p.intro img

更多id 規則也勝少id 的

Full house (AAA22, JJJ55, 66622)勝三條
你也可以估計Full house 勝三條的
同時使用id, class 規則勝只用它們其中之一

div#content.summary li

...勝...
div#content ul li
div.content div.secondary li
div ul li

.

小丑是無敵的

! important 關鍵詞就是撲克內的小丑牌.
"! important" 規則會令你跳過所有其他規則

但這規則是不建議使用的
你很容易會令全個css 檔都是"!important"

建議用法

寫CSS 都有一套策略
令整個檔案更直觀, 修改容易

  1. 先放一般性的規則, 例如body, a, 以定義一個基本的頁面風格
  2. 再用不同的class, id 定義一些地方(.description, .error)
  3. 最後是特別的區域, 例如#primary-links a

避免一開始便定義高級的規則, 例如

div#pagewrapper div#contentwrapper a

否則你便要用很多特定的規則了
所以要用點策略, 慢慢的建立
從一般的頁面開始, 直伸廷到特別的元素, 地區

譯注:
譯完以後發覺很多撲克的用語是很難譯的
中間有不少的內容都太重覆
所以刪減了一些例子, 比喻等等
希望文章不要太長

其實使用firebug 就會顯示出由最高至低的css 權力
已經十分方便, 但因為IE 在CSS 權力上好像有一點偏差
多認識一點還是好的

Google