css三大特性

在了解了选择器以及选择用元素模式的以后，我们已经能够很好的创建美观的也页面了，但有的时候我们并不能写出符合要求的页面样式，这时候我们需要了解一些css所规定的一些属性来方便我们理解以及修改我们的页面。
1.层叠性(解决样式冲突问题)
例如有如下代码：

div { color:red; }
div { color: pink; }

那么这时候问题来了，div中的内容显示的是红色还是黄色呢？css的第一个特性解决的就是这个问题，答案是会显示成粉色.那么我们就可以知道，层叠性的意思是后面的语法会覆盖前面的语法，可以说是遵循就近原则 ，这段代码在网页中显示如下：

可以看到前面的这段代码块被划掉了，这就是层叠性的体现。
2.继承性
我们知道在css中子标签会继承父标签的某些特性，其实这个性质就叫做css的继承性，恰当利用这个特性可以降低css代码的复杂度。
下面介绍继承规则：
一般继承text-, font-, line- 开头的都可以被子标签继承，以及color属性
行高的继承性：
在继承行高中，可以跟单位也可以不跟单位，当行高不跟单位时：

body{
    color:pink;
    font: 12px/1.5 'Microsoft YaHei';
}

div{
    font-size: 14px;
}

这里div是body的子标签，那么在HTML中子元素就会继承父元素body的行高 1.5倍，，也就是14*1.5=21px。
如果子元素没有设置行高，那么父元素下所有的子元素文字大小都为1.5px。
3.优先级
在介绍了前面两种特性了以后，相信有的人就会冒出一个问题，那就是如果有同一个元素被多个选择器选中的时候，到底遵循那个选择器的语法呢？这就涉及到了优先级的问题。当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则执行层叠属性；（按照层叠性来执行）
选择器不同，则根据选择器权重执行。
权重划分：
|

继承或*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important 重要	无穷大

解释一下 ！important：(比如在优先级最低的元素选择器后面加上！important，则其变为优先级最高的权重执行)
这里有几点注意事项：
1.权重由四组数字组成，但不会进位，比如两个元素选择器合在一起形成复合选择器，那么他们就是0，0，0，1+0，0，0，1=0，0，0，2 .并不是0，0，1，0。

可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一数值相同，则判断下一数值 。

#father{
    color: red;
}
 
p{
    color: pink;
}

    <div id = "father">
            <p> 你还是很好看 </p>
   </div>

这种情况显示的会是粉色，因为虽然父元素权重很高，但子元素时继承父元素，优先级为0
也就是说，看标签到底执行哪个样式，就看这个标签有没有直接被选择。
此外a链接浏览器默认指定了一个样式 蓝色的 有下划线，相当于这段代码

a{ color:blue ; } 

复合选择器中会有权重的叠加的问题举例如下：

   ui li{color: red;}
   li{color: green;}

此时显示的应该是上面的颜色，因为上面的有两个元素选择器，权重为0，0，0，1+0，0，0，1 =0，0，0，2，所以其优先级变高了(但其在计算的过程中不要涉及进位问题)