CSS优先级和权重（原创）

总结：邬畏畏

对于初学者来说，CSS很好用，但CSS也是经过精心设计的，可能大家在设计页面是用了大量的样式，

样式多了有的时候发现样式一个样式不起作用，其实是样式有重复，在重复的情况下我们就要了解样式

的优先级。

样式类型	权重
标签选择器	1
类选择器	10
ID选择器	100

 

 

 

 

 

权重值大的样式优先应用到HTML元素上，如果用了“ ！important ” 那么有优先级最高。

权重值可以累加，比如 ： div .title{...} 权重值是1+10

看下面示例：

<style>
.title{color:red}
div .title{color:blue}
.outer .title{color:green}
</style>

<div class="outer">
<h1 class="title">给个梵蒂冈</h1>
</div>
最终h1的颜色是：color:green

-------------------------------------------

<style>
.title{color:red !important}
div .title{color:blue}
.outer .title{color:green}
</style>

<div class="outer">
<h1 class="title">给个梵蒂冈</h1>
</div>
最终h1的颜色是：color:red

--------------------------------------------

<style>
.title{color:red !important}
div .title{color:blue !important}
.outer .title{color:green}
</style>

<div class="outer">
<h1 class="title">给个梵蒂冈</h1>
</div>
最终h1的颜色是：color:blue

 

这就是CSS权重的特点，有了权重浏览器才知道哪个样式最优先使用的对应的HTML元素上。