资料
选择器计算规则
- CSS 选择器的优先级关系：
内联样式 > ID选择器 > 类、属性、伪类选择器 > 标签、伪元素选择器
- 计算优先级： 优先级由 A、B、C、D 的值决定，值的计算如下：
1、如果有内联样式，则 A=1，否则A=0；
2、B的值等于ID选择器出现的次数；
3、C的值等于类、属性、伪类选择器出现的总次数；
4、D的值等于标签、伪元素选择器出现的总次数；
- 例子
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
- 比较优先级的高低 从左往右进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果 4 位全部相等，则后面的会覆盖前面的。
特殊情况
- HTML:
<div class="app" style="color:#f00!important">666</div>
复制代码
- CSS:
.app {
color: 0f0!important;
}
复制代码
内联样式中使用!important，此时外部 CSS 样式无论怎么写都无法覆盖它。这种情况在实际代码中是要杜绝的。
max-width 与 width 是两个属性
- html:
<div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>
- css:
.box {
max-width: 100px;
}
这时候 .box 的宽度只有 100px , 而不是 300px, 可见，max-width 可以超越 width!important!但是，这实际上不是优先级的问题，因为优先级是比较相同属性的，而 max-width 和 width 是两个不同的属性。有时候不管怎么设置容器的 width 都不生效，就要检查一下是不是写了 max-width。
