在CSS世界的权力——权重🥳
在CSS的世界中也存在着权力即CSS权重
1. 概念
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式
2. 以前的BUG
在实际开发中，我们常常会遇到样式不生效的问题，百思不得其解，其实这就是CSS的权重在作祟， 下面举个栗子
<style> #txt{ color: black; } p{ color: aqua; } </style> <body> <p id="txt">CSS的权重问题</p> </body> 复制代码
段落为id选择器所赋的黑色如图：
因为txt为ID选择器其比p的元素选择器权重大，所以段落的字体颜色为黑色
3. 权重计算
来比划一下你和我的权重谁大吧！
大家都了解二进制如何比较大小吧：0010>0001 。
其权重计算与其类似。
| Name | 0，0，0，0 |
| 元素 | 0，0，0，1 |
| 类/伪类 | 0，0，1，0 |
| ID | 0，1，0，0 |
| 行内式 | 1，0，0，0 |
| !import | 无穷大 |
div span { /* 0,0,0,2 */ } p #span_one{ /* 0,1,0,1 */ } p{ /* 0,0,0,1 */ } 复制代码
浏览器会执行权重最大的样式，这就是选择器的权重
每个选择器都有自己的权重，组合选择器由相加计算得到
且选择器权重不会满十进一：0,1,0,0>0,0,28,0
<style> p { color: aqua; } p #txt{ color: blue; } p .txt{ color: chocolate; } </style> <p id="txt" class="txt">CSS的权重问题</p> <p>权重的计算</p> <p class="txt">优先渲染权重最大的样式</p> 复制代码
结果如图：
4. 加载顺序
先来后到的CSS样式
除了权重之外，CSS的渲染规则还有一种即根据css的引入顺序来加载。
同权重的选择器，顺序在后面的最后被加载会覆盖之前的样式
p{ color:green; } link 复制代码
link p{ color:green; } 复制代码
我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式
