# CSS 的继承与优先级

CSS 默认情况下遵循就近原则; 比如当有多个相同的 CSS 选择器出现的时候, 距离标签最近的选择器将作用在标签上;

问题

如何理解相同的 CSS 选择器? 即选择器同名, 拥有的属性也相同, 但是属性值不同;

  • 每个元素(标签)贡献值为 0001 ;
  • 每个类, 伪类贡献值为 0010 ;
  • 每个 id 的贡献值为 0100 ;
  • 每个行内样式贡献值为 1000 ;
  • !important 贡献值为 无穷 ;

TIP

CSS 优先级最复杂的地方会表现在选择器上, 权重是可以叠加的, 但是权重不存在进位的情况, 换句话说, 无数个类也抵不上一个 id , 务必牢记此点

其次, 注意一下 !important 的用法,

/* !important 写在分号内部 */
span {
    color: orange!important;
}
1
2
3
4
Last Updated: 1/11/2020, 11:03:19 PM