CSS权重

那之前我们学期了CSS的选择器

最基础的有：（我们按照优先级排一下）

id选择器 | class选择器 | 标签选择器 | 通配符选择器 | 属性选择器

优先级：!important>行间样式>id>class>标签选择器>通配符

那这些个优先级在html结构不复杂的时候是可以使用的 那当我们的结构很复杂的时候

比如一个比较简单的：

<div class="wapper"  id="id1">

                <em class="em1">1</em>

                <div class="box" id="id2">

                         <em class="em2">2</em>

                 </div>    

</div>

就是上面的这一个很简单的结构

假如说 我们要改变 1 2的颜色

那最简单的方法是不是选用一个标签选择器就可以 css部分就可以这样写 em{background-color:red}

那我们也有别的选择器可以选中这个em标签 比如说我可以 .wapper em{background-color:red} 同样也是好用的 字体背景颜色改为红色

那假如说 我们是这么选的

    #id1 em{background-color:red}

   div .em1{background-color:green}

那这种情况下 文字 1 到底应该是红色 还是 绿色

这种情况下 我们就会用到CSS权重（256进制）

! important      Infinity

行间样式            1000

id                          100

class |属性|伪类    10

标签选择器|伪元素  1

通配符                      0

比如说上面的情况 我们可以通过CSS权重计算来确定他的一个优先级

通过加法的方式：

#id1 em （100+1）>div .em1 (1+10)

那就很明显了 应该是红色