這次帶給大家HTML中定義多個class屬性無效,HTML中定義多個class屬性無效的注意事項有哪些,下面就是實戰案例,一起來看一下。
在寫html的過程中,我們會常常為class屬性定義多個值,但同樣會常常發現自己定義的值無效! ! !
以前碰到這種情況我就直接重寫了,或是直接用id設定css屬性,今天想起來好像有些不對哦。 。 。我必須得去發現真理! ! !
<div id="p" class="middle_div padding_10"> <span id="s" class="normal_span"></span> </div>
我在兩個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中文網其它相關文章!
相關閱讀:
以上是HTML中定義多個class屬性無效的詳細內容。更多資訊請關注PHP中文網其他相關文章!