CSS的三大特性

所属专栏：前端只因变凤凰之路
作者简介：rchjr——五带信管菜只因一枚
前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
文章简介：本文介绍CSS的三大特性。知识学习内容来自b站的 @黑马程序员 的视频

1.1 层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，比如两个div，一个div设置颜色与字体，另一个div设置不一样的颜色。那么就会选择后面的div的颜色和前面div的字体，因为只有颜色冲突了。

原则

样式冲突遵循就近原则，哪个样式设置距离标签更近，就执行哪个样式

    
    
    
    
    

层叠性

1.2 继承性

子标签会继承父标签的某些样式如文字的颜色和大小，最主要的就是和文字有关的如text-,font-,line-这些开头的属性，以及color。

常用情况：在body中设置整个页面的文字格式。

    
    
    
    
    



    

        

            body已经给我设置好了
        
    

行高的继承性

body {
font:12px/1.5 Microsoft Yahei
}

行高可以不跟单位，采用1.5表示字体大小的1.5倍。这样可以让子元素根据自己的文字大小自动调整行高

    
    
    
    
    

指定了自己的大小，行高继承为14*1.5px
指定了自己大小，行高继承为16*1.5排序

    
没指定自己大小，行高继承为12*1.5

1.3 优先性

当一个元素（标签）指定多个选择器，就会有优先级的问题。如果多个选择器选择了同一个元素，就要根据选择器自身的权重来判断。

选择器	选择器权重
继承或者*	0
元素选择器	1
类选择器，伪类选择器	10
id选择器	100
行内样式	1000

注意

继承的权重是0。例如body中指定的文字颜色，但是只要body中的标签有默认值，都会用标签自己的默认值。

复合选择器的权重

复合选择器中的权重会叠加。例如同时设置li和ul li，则用ul li的样式。又比如有.nav li和ul li，则执行.nav li，因为类选择器的权重更大。

    
    
    
    
    



    

        
aaa
        
bbb
        
ccc
        
ddd