CSS 某些元素使用了 user agent stylesheet

在调试页面时，我们有时会看到一些元素的样式和期望的不符，debug查看会发现样式来源于 user agent stylesheet。

user agent stylesheet 实际上是浏览器为了方便页面展示，提升用户体验，提供的默认的样式。对于不同浏览器，提供的默认样式会略有不同。

那么如何不使用默认样式呢？这里就涉及到CSS样式的优先级问题。

同一个元素，可能在多个文件定义了样式，但是最终浏览器只会选择一种。

在非浏览器原因的情况下一般都是会根据选择器的优先级来渲染。尽管css选择器有许多组合，但我们仍有一定的规律来识别它们的优先级，毕竟浏览器也是通过一定的方式计算后来决定采用哪种样式进行渲染的。

来源不同，比较来源

对于不同源样式文件，除了important声明外，作者定义>用户定义>用户代理，更为详细的优先级顺序如下，从上到下依次增高：
user agent stylesheet
user declarations （normal）
author declarations （normal）
author declarations （!important）
user declarations （!important）

这里我们就可以看到，浏览器默认样式的优先级是最低的。如果不想使用默认样式，只需要自己定义一个就可以。

来源相同，比较Weight

对于同源文件，我们会根据特殊值weight来判断。我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
A等：代表内联样式，如: style=””，权值为1000。
B等：代表ID选择器，如：#content，权值为100。
C等：代表类，伪类和属性选择器，如.content，权值为10。
D等：代表类型选择器和伪元素选择器，如div p，权值为1。
Weight = nA + nB + nC + nD (其中n为该选择器的个数)。
Weight越大，则优先级越高。

来源相同，Weight相同，比较顺序

声明靠后者覆盖靠前者。

 

参考 

https://qingywen.github.io/2017/05/05/css-priority/