CSS三大特性(层叠性、继承性、优先级）

目录

（1）CSS层叠性

（2）CSS继承性

（3）CSS优先级

什么是优先级？

优先级判断

优先级之!important

优先级权重

（4)总结：

（1）CSS层叠性

是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉（覆盖）

覆盖原则：先看权重，高者去覆盖。权重一样就遵守就近原则，后来者居上。

（2）CSS继承性

作用：子元素可以继承父元素的样式。 特殊性：

• 并不是所有的属性都可以继承, 只有以color / font- / text- / line-  cursor  /  list-style /  line-hight开头的属性才可以继承。 （cursor：pointer/move；  鼠标是小手/十字架）

• 在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。

• a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

• h标签的字体大小/加粗效果不能修改，必须对h标签本身进行修改。(字体放大两倍)

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse

（3）CSS优先级

1. 什么是优先级？

   优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

2. 优先级判断

   1、如果使用的是同类型的选择器，那么谁写在后面就听谁的。就近原则

   2、如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠。

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

   注：i em h1 a等会修饰字体

3. 优先级之!important

   用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高 。

   1、!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 。

   2、!important必须写在属性值得分号前面，与属性值之间加上一个空格 。

   3、!important前面的感叹号不能省略 。

 <div class="div1" style="color:red !important;">权重最高</div>

        div {
            color:red !important;
        }
        <div>权重最高</div>
      

     4.优先级权重

！important：Infinity

行内样式：1，0，0，0

id选择器：0，1，0，0

class类选择器：0，0，1，0
属性选择器：0，0，1，0     （[attr*=val]）
伪类选择器：0，0，1，0   （hover、:first-child、target）

伪元素选择器：0，0，0，1   （E::first-letter、E::before和E::after）
标签选择器：0，0，0，1

通配符选择器：0，0，0，0
继承样式：0，0，0，0

浏览器默认属性

当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。

权重计算规则

（1）内联样式，如: style=””，权值为1，0，0，0。

（2）ID选择器，如：#content，权值为0，1，0，0。

（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。

（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。

（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。

（6）继承的样式没有权值。!important的权重最高

1,0,0,0 > 0,99,99,99 也就是说从左往右逐个等级比较，前一等级相等才往后比

复合选择器权重的计算 就是一个简单的加法计算

注意：0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

示例：

<!--适用第1行规则-->
<a href="">第一条应该是黄色</a> 
<div class="demo">
	<!--适用第4、5行规则，第4行优先级高-->
	<input type="text" value="第二条应该是蓝色" />

	<!--适用第2、3行规则，第3行优先级高-->
	<a href="">第三条应该是黑色</a>
</div>
<div id="demo">
	<!--适用第5、6行规则，第6行优先级高-->
	<a href="">第四条应该是红色</a>
</div>

a {		/*特殊性值：0,0,0,1*/
	color: yellow;	
} 
div a {	/*特殊性值：0,0,0,2*/
	color: green;
} 
.demo a {	/*特殊性值：0,0,1,1*/
	color: black;
} 
.demo input[type="text"] {	/*特殊性值：0,0,2,1*/
	color: blue;	
} 
.demo *[type="text"] {	/* 特殊性值：0,0,2,0 */
	color: grey;
} 
#demo a {	/*特殊性值：0,1,0,1*/
	color: orange;
} 
div#demo a {	/*特殊性值：0,1,0,2*/
	color: red;
} 

（4)总结：

1. 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 。

2. !important 优先级最高，但也会被权重更高的important所覆盖

3. 行内样式总会覆盖外部样式表的冲突样式(除了!important)

4. 单独使用一个选择器的时候，不能跨等级使css规则生效

   无论多少个class组成的选择器，都没有一个ID选择器权重高。类似的，无论多少个元素组成的选择器，都没有一个class选择器权重高、无论多少个ID组成的选择器，都没有行内样式权重高。所以权重是在双方处于同一等级的情况下，才开始对比。

5. 如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

6. 如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.

7. 权重相同时，与元素距离近的选择器生效

建议：

1. 避免使用!important;

2. 利用id增加选择器权重;

3. 减少选择器的个数（避免层层嵌套）;