CSS样式优先级总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS样式优先级总结相关的知识,希望对你有一定的参考价值。

判断规则

1一般情况 :.外部样式<内部样式<内联样式

2.特殊情况: 外部样式放在内部样式后面

3.通过计算权值判断

    a.内联样式权值1000   

     b.ID选择器权值100 

     c.class类选择器权值10

      d.标签选择器权值1

       e.通配符、子选择器、相邻选择器等的权值为0   

注:无论是外部样式、内部样式还是内联样式都是按照权值判断,权值大的优先,1,2规则只是作为一般情形下的直观判断

技术分享

4.!important 优先级最高

 

总结完给出一道题巩固

  #userlist .contextmenu li.enabled a{ color: blue } /*100+10+1+10+1=122*/
  div#userlist ul.contextmenu li span a{ color: red; }/*1+100+1+10+1+1+1=113*/

 

<div id="userlist">
    <ul class="contextmenu">
        <li class="enabled"><span><a>css优先性级</a></span></li> <!--显示蓝色-->
    </ul>
</div>

 

 

以上是关于CSS样式优先级总结的主要内容,如果未能解决你的问题,请参考以下文章

CSS样式定义的优先级顺序总结

为啥类名加标签在css样式里面无法使用

关于CSS的个人理解

CSS选择器优先级总结

CSS基础总结

css基础知识总结