css 樣式——后面覆蓋前面

yankeys 發(fā)布于2019-08-29 14:04 / 928人閱讀

摘要：實際上是誰在文件中，權(quán)重相等，聲明在后面，那么最終就應(yīng)用誰解釋上面的說明大致意思就是，如果兩個選擇器的聲明權(quán)重相等，那么誰在后面，最后就應(yīng)用誰。

上代碼

.yellow {
    background: yellow;
}

.red {
    background: red;
}

這個區(qū)域渲染出來是什么顏色呢？紅色？黃色？

答案是紅色

不知道有多少人和我有一樣的誤區(qū)，一直以為是由class中的排版順序決定同優(yōu)先級樣式應(yīng)用順序的。。。

實際上是誰在css文件中，權(quán)重相等，聲明在后面，那么最終就應(yīng)用誰

解釋

W3C 上面的說明
https://www.w3.org/TR/CSS2/cascade.html#cascading-order

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

大致意思就是，如果兩個選擇器的聲明權(quán)重相等，那么誰在后面，最后就應(yīng)用誰。

云服務(wù)器 GPU云服務(wù)器覆蓋樣式 css樣式頁面css樣式 css的樣式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112905.html

相關(guān)文章

CSS學(xué)習(xí)摘要-層疊和繼承

摘要：類選擇器具有更高的專用性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五，其專用性值為和它在鏈中少了一個元素選擇器。當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。元素的最終樣式可以在多個地方定義，它們以復(fù)雜的形式相互影響。這些復(fù)雜...

mating 2019-04-23 13:40 評論0 收藏0
利用javascript獲取并修改偽元素的值

摘要：利用方法選擇到偽元素，然后利用方法獲取對應(yīng)的屬性的值。具體用法可以參考的這篇文章而偽元素的屬性值除了常規(guī)賦值外，還有一種特殊的方法來獲取。具體實現(xiàn)參照，不再做具體分析參考文獻獲取元素值之方法熟悉雖然標(biāo)題里寫的是偽元素,不過這篇文章主要是說::before和::after，其余幾個偽元素（::first-letter、::first-line、::selection等)由于沒有cont...

SQC 2019-08-22 10:57 評論0 收藏0
Vue:scoped與module的使用與利弊

摘要：一個應(yīng)用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節(jié)點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應(yīng)用是離不開html、css與js，其中css充...

zhoutk 2019-08-30 15:55 評論0 收藏0
Vue:scoped與module的使用與利弊

摘要：一個應(yīng)用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節(jié)點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應(yīng)用是離不開html、css與js，其中css充...

zr_hebo 2019-08-23 14:56 評論0 收藏0
Vue:scoped與module的使用與利弊

摘要：一個應(yīng)用是離不開與，其中充斥的整個項目中。下面我會分別對與解決方案進行說明，最后在分析它們的利弊與選擇。不過一個子組件的根節(jié)點會同時受其父組件有作用域的和子組件有作用域的的影響。但它的局限性是適用于中小項目中。 showImg(https://segmentfault.com/img/bVbnIPd?w=900&h=383); 一個web應(yīng)用是離不開html、css與js，其中css充...

missonce 2019-08-02 14:10 評論0 收藏0