CSS学习笔记三大特性（层叠、继承、优先级）

CSS三大特性

1、层叠性

       一般情况下如果出现样式冲突，会按照css的书写顺序，以最后的css样式为准。样式冲突的话，一般以就近原则，哪个样式离结构最近就执行哪个样式。如果样式不冲突，就不会层叠。例如：

<style>

         div{width：100px；height:100px}

         div{width:200px; }

</style>

以上样式的width样式冲突，会被蹭掉掉执行后面200px的width，而height没有冲突不会被层叠。

2、继承性

继承性就是在书写css样式的时候，子标签会继承父标签的样式。如文本颜色、字号等等。想要设置一个可继承的属性，将其应用于父级元素即可。

<style>

         div{color：red；}

</style>

<div>

       <p>我是一个段落</p>

</div>

以上p是div的子标签，当给div定义了color颜色为红色的时候，这个时候div里的p里的文本颜色也会被继承到红色属性。

 3、优先级

在定义css的时候，我们经常会出现两个或两个以上的规则应用在同一个元素上。这个时候就会出现优先级问题，我们就要考虑权重了，具体权重说明如下：

①、继承样式的权重为0，即在嵌套结构中，不管父元素的权重有多大，当他被子元素继承的时候，这个时候继承的权重为0。也就是说子元素单独定义的样式会覆盖掉继承来的样式。比如：

<style>

.nav{color:red;}

h1{color:blue;}

</style>

<div class="nav"><h1>我是一个小标题</h1></div>

以上最终h1标题会是蓝色字体，因为nav虽然权重高，但是他被h1继承的时候权重为0，而h1的权重比0大，所以执行了blue。

②、行内样式权重大于应用了style属性的样式。比如：

<style>

h1{color:red;}

</style>

<h1 style=“color=“blue””>我是一个小标题</h1>

以上的在style属性里h1虽然定义了红色，但是直接在行内样式里我们定义了蓝色，这个时候行内样式权重，所以执行蓝色。

③、权重相同是，css遵循就近原则。css样式排在最后面的优先级大于排在上面的css样式。

④、！importa被赋予了最大的优先级，不管权重如何或样式位子的远近，都不及！important的优先级。

⑤、权重值的说明，如下：

  a、继承样式或“*”的权重值为：0；           b、每个元素（标签）的权重值为：0,0,0,1；

  c、每个类/伪类的权重值为：0,0,1,0；         d、每个ID的权重值为：0,1，0,0，；

  e、每个行内样式的权重值为：1,0,0,0；       f、！important的权重值为：无穷大；

⑥、权重的值是可以叠加的，如下：

div ul li 权重值为：0,0,0,3； 

.nav ul li权重值为；0,0,1,2；

a：hover权重值为：0,0,1,1；

注意：权重之间的值叠加的时候是没有进制的，所以不会存在叠加10个div的时候会赶上一个类的选择器的优先级