前言

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

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

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

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

3.1 特指度

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

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

重要聲明注意：

• 重要聲明要在聲明末尾的分號(hào)之前插入 !important 。!important 的位置必須正確，否則聲明將失效
• 帶有 !important 的聲明對(duì)特指度沒(méi)有影響，但它會(huì)與不重要的聲明分開(kāi)處理

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

特指度寫(xiě)法注意：

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

3.2 繼承

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

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

注意事項(xiàng)：

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

案例：因?yàn)橥ㄓ眠x擇符應(yīng)用于全部元素，而且特指度為零，所以它聲明的顏色gray擊敗繼承的顏色black（由于繼承的值沒(méi)有特指度），因此，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 層疊

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

CSS層疊規(guī)則：

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

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

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

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

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

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

提供的常規(guī)聲明

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

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

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

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

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

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

最新評(píng)論