路過 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.introPseudo-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 都有一套策略
令整個檔案更直觀, 修改容易
- 先放一般性的規則, 例如body, a, 以定義一個基本的頁面風格
- 再用不同的class, id 定義一些地方(.description, .error)
- 最後是特別的區域, 例如#primary-links a
避免一開始便定義高級的規則, 例如
div#pagewrapper div#contentwrapper a否則你便要用很多特定的規則了
所以要用點策略, 慢慢的建立
從一般的頁面開始, 直伸廷到特別的元素, 地區
譯注:
譯完以後發覺很多撲克的用語是很難譯的
中間有不少的內容都太重覆
所以刪減了一些例子, 比喻等等
希望文章不要太長
其實使用firebug 就會顯示出由最高至低的css 權力
已經十分方便, 但因為IE 在CSS 權力上好像有一點偏差
多認識一點還是好的
