css 樣式——后面覆蓋前面

yankeys 發布于2019-08-29 14:04 / 840人閱讀

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

上代碼

.yellow {
    background: yellow;
}

.red {
    background: red;
}

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

答案是紅色

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

實際上是誰在css文件中，權重相等，聲明在后面，那么最終就應用誰

解釋

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.

大致意思就是，如果兩個選擇器的聲明權重相等，那么誰在后面，最后就應用誰。

云服務器 GPU云服務器覆蓋樣式 css樣式頁面css樣式 css的樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112905.html

CSS學習摘要-層疊和繼承

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

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

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

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

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

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

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

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

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

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