CSS学习笔记 - 样式优先级

本文为我自己的学习心得与体会，如果你有不同见解，欢迎在下方评论区写下你的想法

在编写Web程序时，为了使程序按照设计出的模样显示在页面上，程序员需要为页面上的HTML元素设置样式。在编写样式时，既可以把样式规则写在HTML文件中，也可以把这部分有关样式规则的代码抽取出来，然后封装到一个单独的文件中，这个文件就是CSS文件。
CSS的语法很简单，它包括两部分：选择器和包含若干属性与相应属性值的集合。常见的选择器包括：元素ID选择器、元素Class选择器、元素属性选择器、元素类型选择器、descendant选择器、child选择器以及pseudo选择器。在使用时，只要通过设置选择器来锁定想要设置样式的元素，就可以把页面设计中对应的显示样式应用到该元素上。但是如何锁定某一个元素呢？如果多个选择器指向同一个元素，而它们又对同一个属性进行了设置，那不就冲突了吗？问题似乎有些棘手，不过不要紧，CSS早已规定了一些规则来解决这些问题，要玩好CSS，首先要了解这些有趣的规则。

CSS优先级规则1 - 我是我程序的主宰（绝大多数情况下...）

浏览器支持的CSS来源除了程序员自己编写的样式外，还有另外两种，分别是user agent样式和user样式。
user agent样式表是浏览器自带的默认样式表，当一个Web程序自身不提供样式表时，就是这个user agent样式表决定着HTML元素显示时的样子。如果你希望完全接管HTML元素的样式设置，网上有许多现成的CSS reset样式表可以下载使用，它的作用是把浏览器提供的默认样式全部覆盖掉，去掉HTML元素默认的任何特殊样式（比如元素间的间距，文字的字体等）。
user样式表是用户手动设置的样式表，作用是提供将页面字体调大之类的辅助功能。user样式表的优先级高于user agent样式表。
而程序员自己编写的样式表叫做Author样式表，它在这三种样式表来源中优先级最高。当这三种样式表来源中的某条样式规则相互冲突时，只有Author样式表中的规则会生效。但是user样式表有一张超级王牌可以用，那就是!important，user样式表中有!important后缀的样式规则拥有最高的优先级，任何其他冲突的规则都要给它让路。

CSS优先级规则2 - 后来者居上

除了不同CSS来源之间存在优先级以外，同一个CSS来源中，CSS代码的顺序也是有先后之分的。如果多个相同选择器定义的规则相互冲突，那么写在最后的选择器中的那条规则会生效。如果这些选择器是写在不同的CSS文件中，然后分别导入到HTML文件中，那么后导入的CSS文件中的那条规则会生效。

CSS优先级规则3 - 越具体越好

同一个CSS来源中，当遇到多个不同选择器定义的规则相互冲突时，应该如何取舍呢？CSS给出了ABC评分体系来解决它。ABC分别表示三个纬度的得分：选择器中指定了多少个元素ID，A纬度就有多少分；选择器中指定了多少个元素Class和元素Attribute，B纬度就有多少分；选择器中指定了多少种元素Type，C纬度就有多少分。三个纬度的得分从左到右并列在一起就是一个选择器的最终得分，得分越高，优先级越高。
这个规则看起来复杂，但其实不难理解，它的目的是让描述的最具体的样式规则拥有最高的优先级，这也符合程序员编写样式时的实际需要。

CSS优先级规则4 - 继承来的样式，适合的才收下

在HTML页面上，显示在元素A里面的元素B，会继承CSS文件中为元素A设置的样式，但不是全部，元素B会有选择的收下部分样式规则。元素B会收下诸如背景颜色、文字大小的样式设置，但不会收下边距设置、间距设置和边框设置。这样做不是任性，而是为了用更少的代码来表达想要的样式效果。以边框设置为例，如果对元素A设置了一个绿色的粗边框，你显然不会想让元素B也在自己的周围套一个小的绿色的粗边框，那最简单的做法就是不继承这个样式。
CSS的世界五彩缤纷，样式设置有非常多的可能性，当考虑是否会被真的继承时，要根据具体的情况进行分析。
样式规则的继承看起来随性，不过也不是毫无规则可循，CSS的初心是通过最简洁的代码来实现最精准的样式，我们了解了这个小心思，在编写CSS代码时，也就可以对样式规则的继承行为有更好的预判了。