css 樣式——后面覆蓋前面

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

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

上代碼

.yellow {
    background: yellow;
}

.red {
    background: red;
}

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

答案是紅色

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

實(shí)際上是誰在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.

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/112905.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

missonce 2019-08-02 14:10 評(píng)論0 收藏0