CSS層疊樣式表之CSS解析機制的優(yōu)先級及樣式覆蓋問題探討

2024-07-11 08:29:01

字體：大中小

供稿：網(wǎng)友

樣式的優(yōu)先級
多重樣式（Multiple Styles）：
如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況。
一般情況下，優(yōu)先級如下：
（外部樣式）External style sheet <（內(nèi)部樣式）Internal style sheet <（內(nèi)聯(lián)樣式）Inline style。
有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。
示例如下：

復(fù)制代碼

代碼如下:
<head>
<style type="text/css">
/* 內(nèi)部樣式 */
h3{color:green;}
</style>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
<h3>測試！</h3>
</body>

選擇器的優(yōu)先權(quán)

對上圖的解釋如下：
1.內(nèi)聯(lián)樣式表的權(quán)值最高 1000；
2.ID 選擇器的權(quán)值為 100；
3.Class 類選擇器的權(quán)值為 10；
4.HTML 標(biāo)簽選擇器的權(quán)值為 1；

復(fù)制代碼

代碼如下:
<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍色 */
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>

結(jié)果：<em> 標(biāo)簽內(nèi)的數(shù)據(jù)顯示為藍色。

CSS 優(yōu)先級法則
•選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；
•當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；
•創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；
•繼承的CSS 樣式不如后來指定的CSS 樣式；
•在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級最大；
示例如下：

復(fù)制代碼

代碼如下:
<html>
<head>
<style type="text/css">
#redP p{
/*兩個color屬性在同一組*/
color:#00f !important; /* 優(yōu)先級最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>

上一篇：IE濾鏡與CSS3效果(詳細整理分享)

下一篇：css實現(xiàn)div自動添加滾動條(圖片或文字等超出時顯示)

發(fā)表評論

共有條評論