首頁 > web前端 > html教學 > HTML中定義多個class屬性時無效的解決方法_HTML/Xhtml_網頁製作

HTML中定義多個class屬性時無效的解決方法_HTML/Xhtml_網頁製作

WBOY
發布: 2016-05-16 16:39:02
原創
2357 人瀏覽過

在編寫html的過程中,我們會經常為class屬性定義多個值,但同樣會經常發現自己定義的值無效! ! !

以前碰到這種情況我就直接重寫了,或是直接用id設定css屬性,今天想起來好像有些不對哦。 。 。我必須得去發現真理! ! !

複製程式碼
程式碼如下:





我在兩個class裡設定的顏色不同,在middle_div裡設定的是紅色,在padding_10裡設定綠色,

結果顯示的是綠色,這給我的第一感覺就是:方向反了!

於是我把兩個位置對換,還是綠色! !

這。 。 。 。

難道是? ? ?

打開css檔案一看,果然padding_10在middle_div 前面,然後我把他們倆位置對換,

刷新瀏覽器,紅色! ! !

所以呢,定義多個class值的時候,一定要注意,把自己最喜歡的樣式放在後面!
但是呢,如果你在padding_10前面加上div(假設父級元素是div),變成div.padding_10,然後你會發現,不管它在哪,我們的p div總是綠色的,

從這個例子可以看出來,css樣式的優先權是在載入css檔案的時候就決定下來的,而不是由後來html裡class屬性位置前後決定的。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板