权重的计算

权重

样式冲突:同一个样式,多次应用到同一个元素。
是指解决样式声明冲突的过程,浏览器自动处理(浏览器自动计算)。

比较重要性(一)

比谁的样式表更加重要,这一步能筛选选出样式就不看下一步了。

CSS样式表有三种来源:

• user agent stylesheet: 用户代理的默认CSS（就是浏览器默认的CSS）
• author style sheets(作者样式): 开发人员定义的CSS（前端开发人员写的external-style，embeded-style，inline-style)
• user style sheets: 用户自定义的CSS（用户自己写的,用户可以设置自定义样式表来覆盖开发人员定义的样式。例如用户可能视力受损，并想在所有网页上设置两倍的正常字体大小，以便更容易进行阅读。

优先级如下,由上至下依次增高(排在最下面额优先级最高):

1. user agent stylesheet
2. user declarations （normal 用户样式）
3. author declarations (normal 作者样式表中的普通样式)
4. author declarations (!important 作者样式表中加了!important的作者样式)
5. user declearations(!important 用户样式表中加了加了!important的用户样式)

对于web开发人员的样式表来说，覆盖用户样式表是有意义的，因此设计可以按预期进行，但是有时用户充足的理由覆盖web开发人员样式，正如上面提到的—这可以通过在他们的规则中使用!important来实现。

此段转载于:https://blog.csdn.net/weixin_30881367/article/details/99024238
文章出处：http://www.cnblogs.com/xesam/

比较特殊性(二)

总体规则: 比谁更特殊,选择去选中的范围越窄,越特殊。比如:id选择器选中的范围比class选择器选中的范围更窄,所以id更优先,因为id选择器只能选中标识一个元素而class可以选中标识多个元素。

具体规则:通过选择器,计算一个4位数(x x x x)。

css样式选择器分为4个等级,a、b、c、d,可以将这4种等级为依据确定css选择器的优先级(也叫权值)。

4个等级从左到右,左边的等级最大越往右等级越小。
即:a > b > c > d。

等级规则:

1. a级(看做千位): 内联样式(style)千位记作1.
2. b级(看做是百位): 选择器中所有id选择器的数量,百位记作1
3. c级(看做十位): 选择器中所有Class类选择器、属性选择器、伪类的数量,十位记作1.
4. d级(看做是个位):选择器中所有元素选择器、伪元素的数量,个位记作1

这个四位数不是逢10进1,是逢256进1,比如b级选择器9+1=10是0,10,0,0而不是1,0,0,0.不过只要记住b等级的选择器是不会有a等级的选择器大就行了。
也就是说无论多少个class选择器相加都不会超过一个id选择器。

权重的例子:

<div style = "color:red">你好世界!</div>  //权值:1,0,0,0

#wrapper #content{}  //选择器中有两个id选择器所以是:0,2,0,0

div#content {}       //选择器中有1个元素选择器和id选择器:0,1,0,1

content p {}		// 0,1,0,1

#content {}		//0,1,0,0

p.comment .dateposted {}	// 0,0,2,1 1个元素选择器和两个class选择器

div.comment p {}			// 0,0,1,2 2个元素选择器和1个class选择器

.comment p {}				// 0,0,1,1

p.comment {}				// 0,0,1,1

.comment {}					// 0,0,1,0

div p {}					// 0,0,0,2

p {}						// 0,0,0,1

p span.warning{}            // 0,0,1,2

比较原次序(三)

如果以上还没有比较出样式,则同一权值(权值相等)后者会覆盖前者样式。

应用

默认样式:
通常情况下浏览器都会为元素设置一些默认样式。默认样式的存在会影响到页面的布局,因为浏览器不同,默认样式也不一样,显示的就不一样。

重置样式表:
最好是覆盖浏览器默认样式,因为不同的浏览器默认样式是不一样的会影响布局比如margin不一样，我们要做的是自己写的网页在任何浏览器里看样式都是一样的，常见的重置样式表:nomalize.css(对默认样式进行统一),reset.css（重置样式）,meyer.css.可以去网上下载。