深入了解css选规则器权重值的计算

CSS三大特性—— 继承、 优先级和层叠。

继承：即子类元素继承父类的样式;

优先级：是指不同类别样式的权重比较;

层叠：是说当数量相同时，通过层叠(后者覆盖前者)的样式。

css选择符分类

首先来看一下css选择符(css选择器)有哪些?

1.标签选择器(如：body,div,p,ul,li)

2.类选择器(如：.head 和.head_logo)

3.ID选择器(如：#head)

4.全局选择器(如：*号)

5.组合选择器(如：.#head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span {color:red} 即具有相同样式的标签分组

8.伪类选择器(如：link、visited、active、hover)

9.子选择器 (如：div>p ,带大于号>) div下的直接子级

10.相邻兄弟选择器器 (如：h1+p,带加号+)

css优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
元素选择器
通配符选择器
浏览器自定义或继承

!important > 行内样式>ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

优先级的算法

选择器的权重

	每个选择器都有对应的权重值而权重值决定选择器的优先级

每个规则对应一个初始"四位数"：0、0、0、0
　　行内选择符，则加1、0、0、0
　　ID选择符，则加0、1、0、0
　　类选择符/属性选择符/伪类选择符，则分别加0、0、1、0
　　元素选择符/伪元素选择符，则分别加0、0、0、1
　　算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高
注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先
例如：

	<div class="box">
		<div id="div">
			<div class="div">
				<p class="p">
					这是一个p标签
				p>
			div>
		div>		
	div>

		.div{
    		color: red;
    	}
    	div div div {
    		color: green;
    	}

设置class属性为 div的元素的字体颜色
上面说了class选择器的权重是0010；
元素选择器是0001，这里有三个元素选择器 所有的是0003；
div div div 的权重值是0003 比 .div的权重要小所以这里的字体颜色是红色

再上面的结构中可以添加class选择器或者 id选择来改变权重使字体颜色变为绿色
如：

	div div div.div {
    		color: green;
    	}

效果如下：

那么div div div.div 的权重值是多少呢
有3个div元素选择器所以权重值0003 但是他还有一个class选择器权重值是0010；
所以他的权重值 是0013 ；
0013比0010大 所以页面展示的是绿色；
如果又要把他变为红色该怎么办呢
可以使用两个clss选择器 ，两个clss选择的权重值是0020比0013大；
通过以下操作变为红色：

	.box .div{
    	color: red;
    }

效果：

这个例子或许再平时不怎么能体现出来，但是你在修改别人的代码 而却大篇幅的css样式，那么要修改样式找到那个样式需要花费一定的时间，那么就可以通过权重值来覆盖别人的样式。