首頁 > web前端 > html教學 > HTML中定義多個class屬性時無效的解決方法介紹

HTML中定義多個class屬性時無效的解決方法介紹

高洛峰
發布: 2017-03-07 11:24:13
原創
2256 人瀏覽過

為class屬性定義多個值,常常會發現定義的樣式無效,經過測試,在定義多個class值的時候,一定要注意,把自己最喜歡的樣式放在後面,否則無效 在編寫html的過程中,我們會經常為class屬性定義多個值,但同樣會經常發現自己定義的值無效! ! !

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

程式碼如下:

<p id="p" class="middle_p padding_10"> 
<span id="s" class="normal_span"></span> 
</p>
登入後複製


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

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

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

這。 。 。 。

難道是? ? ?

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

刷新瀏覽器,紅色! ! !

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

從這個例子可以看出來,css樣式的優先權是在載入css檔案的時候就確定下來的,而不是由後來html裡class屬性位置前後決定的。

更多HTML中當定義多個class屬性時無效的解決方法介紹相關文章請關注PHP中文網!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板