1. 样式的引用方式对css优先级的影响
- 行内样式，直接写在标签的style属性中。<p class="in" style="background: indigo;"></p>。
- 内部样式，写在头部的style标签中
- 外链样式， 通过link标签来引用css文件。<link rel="stylesheet" type="text/css" href="index.css"/>。
行业样式>内部样式>外联样式
但是有!important的样式除外
2. 选择器对css样式优先级的影响
首先看一张图
specificity.jpg
当单独使用这些选择器时他们的优先级是从上而下递增的。当组合使用时需要按照特制度（specificity）来计算优先级。特制度表示一个选择器表达式的重要程度，数值越大越重要。可以参考MDN。
那怎么计算一个选择器表达式的特制度呢?
根据W3C Specificity，可以知道每种选择器的特指度，如上图右边数值。根据w3c规范很容易知道计算规则。
从选择器表达式中分别找出标签选择器，class选择器，属性选择器，伪类选择器，和id选择器的个数。
a代表特指度为10的选择，b代表特指度为100的选择器，c代表特指度为1000的选择器，最后计算a*10+b*100+c*100的值就是该选择器表达式的特指度。比如：
p 1*10+0*100+0*1000=10，特指度为10。p .box 1*10+1*100+0*1000=110，特指度为110。p .box #wrap 1*10+1*100+1*1000=1110，特指度为1110；
网友评论