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 ]