css特殊性(权值问题)

  1. 有的时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一种css样式呢,如下代码:

    p{color:red};
    .first{color:green};
    <p class="first">我是什么色</p>

    运行完代码发现,居然是绿色。那是什么影响了浏览器对颜色的选择呢?此时就是浏览器会选择权值更高的来显示。那么下面看一下css权值规则:

    标签的权值为1,类选择器的权值为10,ID选择器的权值最高为100。权值是可以相加的,如下:

    p{color:red} ;/*权值1*/
    p span{color:green}; /*权值为1+1=2*/
    .warning{color:red}; /*权值为10*/
    p span.warning{color:blue}; /*权值为1+1+10=12*/
    #footer  .note p{color:yellow}; /*权值为100+10+1 = 111*/

2. 最高权值: !important
            有些特殊的情况需要为某些样式设置具有最高权值
            p{color:red!important;}
    注意:!important 要写在分号前面。

 

原文地址:https://www.cnblogs.com/miximixi/p/10270613.html