CSS樣式id和class屬性優先順序問題
阿新 • • 發佈:2018-12-26
在DIV+CSS設計網頁時, 總會碰到一些CSS屬性優先順序問題. 如果不清楚優先順序的等級, 直接想當然的認為應該是這樣, 就很容易出錯. 這裡分析一個本人碰到的問題, 學習一下屬性優先順序問題.
下面是程式碼測試程式碼:
<style type="text/css">
<!–
#div1 ul li{ list-style: square;}
.div2class ul li{ list-style:none;}
–>
</style>
<div id="div1" class="div1class">
<div id="div2" class="div2class">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
上面程式碼本意是通過想通過div2class來去掉li前面定義的點, 按照越靠近優先順序越高原則, 應該是應用 .div2class 中的定義, 但實際情況方點並沒有去掉. 並沒有應用 .div2class 還是按照 #div1 中的設定顯示. 這證明 id 的優先順序要高於 class.
總結一點經驗就是: 通過繼承來的屬性 id 的優先順序高於 class
CSS的優先順序順序: tag中的style > id > class > tag > 繼承的屬性 按同樣的順序