免費(fèi)AI編程助手
CSS 樣式級(jí)聯(lián)
瀏覽器使用以下順序查找屬性值。
- 內(nèi)聯(lián)樣式 - 使用元素上的style全局屬性定義的樣式
- 嵌入式樣式 - 在樣式元素中定義的樣式
- 外部樣式 - 使用鏈接元素導(dǎo)入的樣式
- 用戶樣式 - 已由用戶定義的樣式
- 瀏覽器樣式 - 瀏覽器應(yīng)用的默認(rèn)樣式
例如，為一個(gè)元素選擇文本的顏色。
瀏覽器將需要為CSS顏色屬性找到一個(gè)值。
首先，它將檢查它試圖渲染的元素是否具有定義顏色值的內(nèi)聯(lián)樣式，如下所示：
<a style="color:red" href="http://m.hgci.cn">Visit the website</a>
如果沒(méi)有內(nèi)聯(lián)樣式，瀏覽器將查找包含適用于元素的樣式的樣式元素，如下所示：
<style type="text/css">
a {
color: red;
}
</style>
如果沒(méi)有這樣的樣式元素，瀏覽器會(huì)查看通過(guò)鏈接元素加載的樣式表。
如果仍然找不到顏色屬性，則使用默認(rèn)的瀏覽器樣式。
注意
屬性的前三個(gè)來(lái)源（內(nèi)聯(lián)樣式，嵌入樣式和樣式表）統(tǒng)稱為作者樣式。
用戶樣式表中定義的樣式稱為用戶樣式，瀏覽器定義的樣式稱為瀏覽器樣式。
重要樣式
您可以通過(guò)將屬性值標(biāo)記為重要來(lái)覆蓋正常的級(jí)聯(lián)順序。
通過(guò)對(duì)聲明附加！important ，可以將單個(gè)值標(biāo)記為重要。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
color: black !important;
}
</style>
</head>
<body>
<a style="color:red" href="http://m.hgci.cn">Visit the website</a>
<p>This is a text.</p>
<a rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>瀏覽器優(yōu)先選擇重要的樣式，無(wú)論它們?cè)诤翁幎x。
特異性和順序評(píng)估
如果有兩個(gè)樣式應(yīng)用于在同一級(jí)別定義的元素，并且它們都包含瀏覽器正在尋找的CSS屬性的值。
要決定使用哪個(gè)值，瀏覽器會(huì)評(píng)估每個(gè)樣式的特異性，并選擇最具體的值。
瀏覽器通過(guò)計(jì)算三個(gè)不同的特征來(lái)確定樣式的特異性：
- 樣式選擇器中的id值的數(shù)量
- 選擇器中的其他屬性和偽類的數(shù)量
- 選擇器中元素名稱和偽元素的數(shù)量
瀏覽器合并來(lái)自每個(gè)評(píng)估的值，并應(yīng)用來(lái)自最特定樣式的屬性值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a {
color: black;
}
a.myclass {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="http://m.hgci.cn">Visit the website</a>
<p>The is a test.</p>
<a class="myclass" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>
當(dāng)評(píng)估特異性時(shí)，您以a-b-c的形式創(chuàng)建一個(gè)數(shù)字，其中每個(gè)字母是三個(gè)特征之一的總和。
只有a值相等，瀏覽器才會(huì)比較b值。
只有當(dāng)a和b的值相同時(shí)，瀏覽器才會(huì)考慮c值。
1-0-0的特異性得分比0-2-2更特異。
在上面的代碼中，selector a.myclass包含一個(gè)類屬性，這意味著樣式的特殊性是0-1-0。 0用于id值，1用于其他屬性，0用于元素名稱。
當(dāng)呈現(xiàn)已分配給myclass類的元素時(shí)，瀏覽器會(huì)為color屬性找到一個(gè)值。對(duì)于所有其他的元素，將使用另一個(gè)樣式的值。
當(dāng)在具有相同特定性的樣式中定義值時(shí)，瀏覽器根據(jù)順序選擇值。
例子
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a.myclass1 {
color: black;
}
a.myclass2 {
color:white;
background:grey;
}
</style>
</head>
<body>
<a href="http://m.hgci.cn">website</a>
<p>This is a paragraph.</p>
<a class="myclass1 myclass2" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
繼承
如果瀏覽器找不到一個(gè)可用樣式中的值，它將使用繼承。
繼承意味著獲取由父元素定義的屬性的值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
</style>
</head>
<body>
<a href="http://m.hgci.cn">website</a>
<p>This is a <span>test</span>.</p>
<a rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html> span 元素的父代是 p 元素。
span元素從父p元素繼承color屬性。
不是所有的CSS屬性都是??繼承的。
只有與外觀相關(guān)的是繼承的，包括文本顏色，字體詳細(xì)信息等。
與布局相關(guān)的不是繼承。
inherit關(guān)鍵字
你可以通過(guò)使用inherit在樣式中強(qiáng)制繼承，
inherit 顯式地告訴瀏覽器對(duì)屬性使用父元素的值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
color:white;
background:grey;
border: medium solid black;
}
span {
border: inherit;
}
</style>
</head>
<body>
<a href="http://m.hgci.cn">website</a>
<p>This is a <span>test</span> from m.hgci.cn.</p>
<a rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >W3C</a>
</body>
</html>
更多建議：