CSS权重详解

权重---样式发生冲突

以下面为例,我们通过元素选择器和类名选择器给元素样式,元素的样式使用了类名的样式.如果我们改变标签和类名的位置,结果还是一样,并不是位置的原因,而是两者的权重不同.

//CSS 
 p {
       color: rgb(0, 47, 255);
        }
 .color {
            color: aqua;
        }

//HTML
   <p class="color">666</p>

 从上例可以知道,权重越大,浏览器CSS权重策略就会判定该样式显示.

选择器权重大小排序

行内样式>ID选择器>类选择器,属性选择器,伪类>元素选择器,伪元素.

由于权重分为四级,我们通常采用 0 0 0 0进行比较,0的位置分别与其权重大小层级对应.

我们以下面为例

<p>
   <span>
        <a href="" id="box" class="box"></a>
   </span>
</p>

选择器的权重比较

选择器	权重
a	0,0,0,1
p a	0,0,0,2
p span a	0,0,0,3
.box	0,0,1,0
a.box	0,0,1,0
#box	0,1,0,0
a#box.box	0,1,1,1

由上表可知,每个选择器分别的权重了.当两者权重相同时,写在后面的样式权重高.

全局选择器的权重(*)

有例子可知,全局选择器(*)的权重最低为0,0,0,0

//CSS
 * {
            color: antiquewhite;
        }

        div {
            color: aqua;
    }

//HTML
<div>666</div>

 最高权重关键词 !important

此时全局选择器有关键词的加持,权重达到最高 

//CSS
 * {
            color: rgb(59, 1, 253) !important;
        }

        div {
            color: aqua;
   }

//HTML
  <div>666</div>

继承

给父元素指定某种样式,它的子元素也会具有相应的样式.爸爸和儿子的样式继承了爷爷的,儿子继承了爸爸的,继承的样式的权重非常小,比全局选择器还要小.

  //CSS
.grandpa {
            font-size: 50px;
        }

        .pa {
            color: aqua;
            font-weight: 700;
        }

        .son {
            font-weight: normal;
        }

//HTML
 <div class="grandpa">
        爷爷
        <div class="pa">
            爸爸
            <div class="son">
                儿子
            </di>
        </div>
    </div>