前言

Q：如果多個規(guī)則匹配同一個元素，而且部分聲明之間有沖突，那么我們?nèi)绾沃滥膫€規(guī)則勝出呢？

A：用戶代理會計算每個規(guī)則中選擇符的特指度，然后將其依附到規(guī)則中的每個聲明上。如果兩個或多個屬性聲明有沖突，特指度最高的聲明勝出。而為了計算特指度，用戶代理必須把規(guī)則“打散”成單獨的規(guī)則

例如：h1 { color: silver; background: black; } 將變成以下形式。二者的特指度都是 0,0,0,1 ，賦予每個聲明的值就是它

h1 { color: silver; } 
h1 { background: black; }

3.1 特指度

特指度（或權(quán)值）：表示一個css選擇器表達(dá)式的重要程度

選擇符的特指度由選擇符本身的組成部分決定。一個特指度值由四部分構(gòu)成，例如：0,0,0,0

重要聲明注意：

• 重要聲明要在聲明末尾的分號之前插入 !important 。!important 的位置必須正確，否則聲明將失效
• 帶有 !important 的聲明對特指度沒有影響，但它會與不重要的聲明分開處理

所有帶 !important 的聲明會放在一起，而特指度沖突就在這個范圍內(nèi)解決
非重要的聲明作為一個整體，其中的沖突使用特指度解決
當(dāng)重要聲明和非重要聲明沖突時，重要聲明始終勝出

特指度寫法注意：

• 特指度值是從左向右比較的。特指度 1,0,0,0 比所有以 0 開頭的特指度大，不管后面的數(shù)字有多大
• 通用選擇符不增加特指度，它的特指度是 0,0,0,0 ，這與沒有特指度是不同的
• 連接符沒有特指度，即連零都沒有

3.2 繼承

繼承：是指把一個元素的某些屬性值傳給其后代的機制（某些樣式不僅應(yīng)用到所指元素上，還應(yīng)用到元素的后代上）

• 把聲明應(yīng)用到可以繼承的元素上后，那個元素將使用聲明的樣式渲染；這個值繼續(xù)沿著樹狀圖向下傳播到后代元素，直到?jīng)]有后代為止
• 屬性值絕不向上傳播，即元素的樣式絕不傳給祖輩元素
• 在HTML中，向上傳播規(guī)則有個例外：應(yīng)用到body元素上的背景樣式會傳給HTML元素。HTML時文檔的根元素，用于定義渲染文檔的畫布。這一例外僅發(fā)生在為body元素設(shè)定了背景，而沒有為html元素定義背景的情況下

注意事項：

• 很多屬性是不繼承的，這通常是為了避免得到意外的結(jié)果
• 繼承的值沒有特指度，連零都沒有

案例：因為通用選擇符應(yīng)用于全部元素，而且特指度為零，所以它聲明的顏色gray擊敗繼承的顏色black（由于繼承的值沒有特指度），因此，em元素渲染為灰色，而不是黑色

* { color: gray; }
h1#page-title { color: black; }

<h1 id="page-title">
	Meerkat	<em>Central</em>
</h1>
<p>Welcome to the best place on the web for meerkat information!</p>

3.3 層疊

層疊：是一種樣式在文檔層次中逐層疊加的過程，目的是讓瀏覽器面對某個標(biāo)簽特定屬性值的多個來源，確定最終使用哪個值

CSS層疊規(guī)則：

• 按顯示權(quán)重排序，以 !important 標(biāo)記的規(guī)則比沒有這一標(biāo)記的權(quán)重高

如果兩個規(guī)則應(yīng)用到同一個元素上，而其中一個以 !important 標(biāo)記，那么有此標(biāo)記的規(guī)則勝出

• 如果顯示權(quán)重相同，就要考慮規(guī)則的來源。聲明有三個來源：創(chuàng)作人員、讀者、用戶代理

讀者提供的樣式中以 !important 標(biāo)記的聲明

創(chuàng)作人員編寫的樣式中以 !important 標(biāo)記的聲明

創(chuàng)作人員編寫的常規(guī)聲明讀者

提供的常規(guī)聲明

用戶代理的默認(rèn)聲明

• 如果各聲明的顯示權(quán)重和來源相同，那么應(yīng)該按特指度排序，特指度高的聲明勝出
• 如果兩個規(guī)則的顯示權(quán)重、來源和特指度都相同，那么在樣式表中的位置靠后的規(guī)則勝出

Class：類選擇符、屬性選擇符、偽類選擇符 ↩︎

Element：元素選擇符、偽元素選擇符 ↩︎

本文來自博客園，作者：不二橘子醬，轉(zhuǎn)載請注明原文鏈接：https://www.cnblogs.com/feeder/p/14979688.html

到此這篇關(guān)于CSS中的特指度和層疊的文章就介紹到這了,更多相關(guān)css特指度層疊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論