CSS樣式id和class屬性優先順序問題

在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     >   繼承的屬性 按同樣的順序

 

原創文章 轉載請註明出處: 登高望遠 [ http://www.dengor.com/archives/618.html]