浏览器是怎么判断哪个css属性生效的?

同一个样式属性, 多次应用在同一个元素上, 就造成了声明冲突.
层叠: 解决声明冲突的过程, 这个过程由浏览器自动处理(一般也可以认为是权重计算).

层叠的步骤(依次进行, 如果已经胜出, 不再比较后面的步骤):

1. 比较重要性
   重要性从高到低

   • 作者样式表中的!important样式
   • 作者样式表中的普通样式
   • 浏览器默认样式表中的样式

2. 比较特殊性
   特殊性的比较看选择器, 总体来说, 选择器选中的范围越窄, 越特殊.
   具体规则: 通过选择器, 计算出一个4位数
   a. 千位: 如果是内联样式, 记为1, 其余为0
   b. 百位: 等于id选择器的数量
   c. 十位: 等于类选择器, 属性选择器, 伪类选择器的数量之和
   d. 个位: 等于标签选择器, 伪元素选择器的数量之和

3. 比较源次序
   代码书写靠后的胜出.