首頁  >  文章  >  web前端  >  HTML中定義多個class屬性無效

HTML中定義多個class屬性無效

php中世界最好的语言
php中世界最好的语言原創
2018-02-08 09:40:434073瀏覽

這次帶給大家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中文網其它相關文章!

相關閱讀:

marquee元素如何實現滾動字體與圖片的效果

HTML的TextArea怎麼保存格式

以上是HTML中定義多個class屬性無效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn