CSS 優先級使用技巧

2024-07-11 08:27:28

字體：大中小

來源：轉載

供稿：網友

css優先級的四大原則：

原則一：繼承不如指定

如果某樣式是繼承來的永遠不如具體指定的優先級高。
例子1：
CODE:
<style type="text/css">

</style>
<span class="class3">我是多大字號？</span>

運行結果：.class3{ font-size: 12px; }

例子2：

CODE:
<style type="text/css">

</style>

<div id="id1" class="class1">
<p id="id2" class="class2"> <span id="id3" class="class3">我是多大字號？</span> </p>
</div>

運行結果：.class3{ font-size: 12px; }

注意：后面的幾大原則都是建立在“指定”的基礎上的。

原則二： #ID > .class > 標簽選擇符

例子：
CODE:
<style type="text/css">

</style>

<span id="id3" class="class3">我是多大字號？</span>

運行結果：#id3 { font-size: 25px; }

原則三：越具體越強大。

解釋：當對某個元素的CSS選擇符樣式定義的越具體，層級越明確，該定義的優先級就越高。
CODE:
<style type="text/css">

</style>

<div class="class1">
<p class="class2"> <span class="class3">我是多大字號？</span> </p>
</div>

運行結果：.class1 .class2 .class3{font-size: 25px;}

原則四：標簽#id >#id ; 標簽.class > .class

上面這條原則大家應該也都知道，看例子
CODE:
<style type="text/css">

</style>
<span id="id3">我是多大字號？</span>
<span class="class3">我是多大字號？</span>

運行結果：span#id3{font-size:18px} | span.class3{font-size:18px}

很多人會有這樣的疑問，為什么不把這個原則四歸入原則一形成：
【標簽#ID > #ID > 標簽.class > .class > 標簽選擇符 > 通配符】呢？或者將 “標簽.class” 看作多更為具體的 “.class” 從而歸入原則二呢？后面我將解答各位的疑惑，這就涉及到CSS的解析規律---------這四大原則間也是有優先級的，是不是有些糊涂了？別急，繼續看。

上一篇：純css 圓角實現代碼

下一篇：span margin 設置生效