css优先级计算规则
优先级的计算规则
| # | A | B | C | D |
|---|---|---|---|---|
| 内联样式 | ☑ | ☐ | ☐ | ☐ |
| ID选择器 | ☐ | ☑ | ☐ | ☐ |
| 类选择器 | ☐ | ☐ | ☑ | ☐ |
| 属性选择器 | ☐ | ☐ | ☑ | ☐ |
| 伪类 | ☐ | ☐ | ☑ | ☐ |
| 标签选择器 | ☐ | ☐ | ☐ | ☑ |
| 伪元素 | ☐ | ☐ | ☐ | ☑ |
A、B、C、D各自对应不同的选择器出现的次数。
#id > div > span > a.link{}-
没有内联样式A为0
-
有一个id选择器B为1
-
有一个类选择器C为1
-
有三个标签选择器D为3
A、B、C、D可简写为(0,1,1,3)
优先级的比较规则是，从左往右一次比较A、B、C、D，大的优先级高。如果四位全一样，则后面的会覆盖前面的。
优先级特殊情况
-
在样式后面!important会将样式的优先级提升到最高。
-
在width后面设置!important不会影响max-width。height和max-height同理。
知识点：
-
属性选择器
[title]{
color:red;
}
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="#">W3School</a>问题
这里有一个小问题，我在尝试的时候发现给内联样式加上!important也无法覆盖伪类的样式。