遵循以下优先级(参考MDN CSS优先级)
以下顺序按照优先级递减的规则排列
- ！important规定的规则(不建议使用，可能导致debug困难)
- 内联样式，总是会覆盖外部样式
- ID选择器中定义的样式(如#container)
- 类选择器(如.book)，属性选择器([type=text])和伪类(:hover,:focus,:active等)
- 类型选择器(如input)和伪元素(常见的::after和::before)
- 注意上述优先级只有在多处定义的样式中有相同的规则的时候才会生效。同优先级的规则总是CSS表中后定义的规则覆盖前面的规则。
- 通配符()，关系选择符(+，~，>，' ')和逻辑组合伪类(:not(), :is()和:where)对优先级没有影响，但是否定选择器括号内部定义的规则*对优先级有影响
对于样式表来讲，又有以下的优先级（优先级递减）：
- 内联样式
style="..." - 内部样式
<style> .... </style> - 外部样式
<link href="..." ref="stylesheet" type="text/css" />
