HTML/CSS/JS学习笔记 Day7（CSS--C4 CSS的三大特性）

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day6 内容梳理：

目录

CSS 4.CSS的三大特性

4.0 概述

4.1 层叠性

4.2 继承性

4.3 优先级

权重优先级

权重叠加

---

CSS 4.CSS的三大特性

4.0 概述

CSS有三个特性：层叠性、继承性、优先级。

4.1 层叠性

如果给相同的选择器设置相同的样式但赋值不同，会导致一个样式覆盖掉（或叫层叠）另一个冲突的样式。层叠性主要用于解决样式用途的问题。

层叠性原则：

样式冲突：遵循就近原则，哪个样式离结构更近就执行哪个样式。

样式不冲突：不会层叠。

样式冲突的情况：

比如给一句话先后赋红色、蓝色，由于代码都是对代码颜色进行赋值，所以离p更近的color: blue会被留下。

    
    
    
    



    
这是一句话。

样式不冲突的情况：

先给

里的一句话赋红色并设置字体为40px，再给这句话赋蓝色，可以看到这句话变成了40px且为蓝色。样式冲突只发生在颜色之间，不影响字体大小的赋值。

    
    
    
    



    
这是一句话。

4.2 继承性

子标签会继承父标签的某些样式，比如文本颜色、字号、行距等等。恰当地使用继承可以简化代码。

比如在标签中写个子标签

，

会继承的样式：

    
    
    
    



    
        
这是div里的子标签
    

补充：文字的行高也具有继承性，除了以px的形式表示以外，还可以用倍数的形式来表示。

比如在body里放div标签、p标签，并把body的行高设为1.5倍，发现如果div和p各自的字体大小如果设置得不同的话，最后行高也不同：

    
    
    
    



    这是div标签
    
这是p标签

4.3 优先级

当为同一个元素指定了多个选择器时，就会产生优先级。

如果选择器相同，就出现了层叠性，会根据就近原则去实施最近的选择器；

如果选择器不同，就根据选择器的权重来确定优先执行谁。

权重优先级

!important > 行内样式style=”” > ID选择器 >类选择器 > 元素选择器 > 继承自父类的格式

以下逐一讨论每种情况。

情况1：类选择器 > 元素选择器

即使类选择器写在元素选择器上面，但由于权重而非就近原则，所以仍显示类选择器的修改，因为类选择器（标蓝了）的权重高于元素选择器（标天蓝），所以字体呈现蓝色。

    
    
    
    



    这是一句话，它的颜色会显示出当前优先级最高的选择器是谁

情况2：ID选择器 > 类选择器

字体会呈现用ID选择器选中的样子（橘色）：

    
    
    
    



    这是一句话，它的颜色会显示出当前优先级最高的选择器是谁

情况3：行内选择器style > ID选择器

行内选择器的颜色标为红，ID选择器标为橘，最终由于优先级会显示为红色：

    
    
    
    



    这是一句话，它的颜色会显示出当前优先级最高的选择器是谁

情况4：!important > 行内选择器style

被标为天蓝色的元素选择器的权重是最低的，但如果加上!important，又会变为权重最高的：

    
    
    
    



    这是一句话，它的颜色会显示出当前优先级最高的选择器是谁

情况5：继承的权重最小

子类继承父类后，权重变为最低，此时如果对父类和该标签都做了修改，则实施标签的修改而非父类的。

比如父类是字体颜色为蓝的ID选择器，子类标签为橘色，最后显示橘色：

    
    
    
    



    
        
这是一句话，它的颜色会显示出当前优先级最高的选择器是谁
    

权重叠加

复合选择器中会出现权重叠加的情况，此时需要计算权重。

权重会有叠加（直接相加），但是永远不会有进位。

类型	权重
继承自父类的样式	0，0，0，0
元素选择器	0，0，0，1
类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=””	1，0，0，0
!important	无穷大

比如下面的几个例子。

例1：元素选择器累加

    
    
    
    



    

        
这是一句话，它的颜色会显示出当前累加优先级最高的复合选择器
    

例2：类选择器和元素选择器累加

    
    
    
    



    

        
这是一句话，它的颜色会显示出当前累加优先级最高的复合选择器
    

其他例子：

div-ul-li：0，0，0，3【因为div、ul、li都是标签0，0，0，1.三标签叠加得到】

.nav-ul-li：0，0，1，2【.nav是类选择器0，0，1，0。而ul和li都是标签】

a:hover：0，0，1，1【:hover是伪类选择器0，0，1，0。a属于标签。】

.nav a：0，0，1，1【.nav是类选择器0，0，1，0。a是标签0，0，0，1】

实际应用的例子：

使用权重累加可判断某些更改是否会起效，比如我想把第一句话改成蓝色，但由于它的叠加权重不是最大的所以无法更改成功，见下方代码。

    
    
    
    



    

        
第一句话
        
第二句话
        
第三句话
        
第四句话