CSS中选择器的优先级

来源:互联网 发布:人工智能入门书籍 编辑:程序博客网 时间:2024/03/29 13:11

  选择器优先级的一些问题

#Box div{     color:red;}.important_false{     color:blue;}.important_true{     color:blue !important;}


<div id="Box">    <div class="important_false">这一行末使用important</div>    <div class="important_true">这一行使用了important</div></div>

这种情况下,显示为   


去掉#Box中的div,显示为



 首先CSS的优先级顺序:   tag中的style   >   id     >     class  >  tag     >   继承的属性 按同样的顺序

#Box div 情况下:id+tag>class所以显示红色


#Box 情况下: 则按照越靠近优先级越高原则 ,所以显示蓝色

当父元素和子元素设置相同的样式时,继承的 权重很小,有的浏览器认为他是0.1,所以不加div显示蓝色,加上div时,显示红色。

 当父元素和子元素设置相同的样式时,继承的 权重很小,但是比0大 


    另一测试代码

<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     >   继承的属性 按同样的顺序





0 0