CSS-4：CSS的三大特性 - 详解

一.特性一：层叠性

相同的选择器给设置相同的样式，如都设置了color或者font-size的样式，此时一个样式会覆盖（层叠）掉另外一个冲突的样式，因为不可能两个样式同时起作用

层叠性主要解决样式冲突的问题

层叠性的特征：




    
    
    CSS特性之层叠性
    


    长江后浪推前浪，前浪死在沙滩上。

看完这段代码，你猜猜看<body>标签中的<div>标签里面的文字的颜色是什么？

答案是：粉色

可以按下F12键打开开发者模式，查看Element中文字的详细情况

可见确实是根据“就近原则”来执行层叠性这个特性的

font-size=12px;没有和第二个div选择器中的样式冲突，就不会被层叠掉

因此页面的字体大小是12像素，比之前变小了

继承性就是在CSS中子标签会继承父标签的一些样式，但并不是所有的样式都会继承，如color，font-size，line- ， text-这些和文字相关的样式会被继承

恰当地使用继承性可以简化CSS的代码，降低CSS样式的复杂性




    
    
    CSS继承性
    


    
        龙生龙，凤生凤，老鼠的儿子会打洞。

效果：可见，虽然没有给<p>标签设置样式，但是由于它在<div>标签内部，是<div>标签的子节点，所以会继承<div>标签的样式

打开调试工具，可以看到继承性的具体信息：

font-size: 12px/24px;

12px表示字体的大小，而斜杠后面的24px表示行高的大小，为24像素

但是行高的大小也可以不跟单位，表示的是行高大小是当前元素的字体大小的多少倍




    
    
    行高的继承
    


    
        现在是北京时间17点50分
    
    2025年11月17日
    粉红色的回忆

打开开发者工具，（注意：font-size样式不支持设置行高和字体族信息，要将它改为font复合属性）

修改正确后，可以发现确实<p>中的字体的字体大小继承了当前行高*1.5这个属性

同理，可以查看<div>标签外部的<p>标签中文字的字体大小：

当同一个元素指定多个选择器，就会有优先级的产生

规则：




    
    
    CSS优先级
    


    你笑起来真好看

效果：

如设置：

color:pink!important;

则最优先设置pink颜色（注意：!important单独写才起着权重最大的作用，如果它写在其他选择器内部，那么它就是属于这个选择器的权重，遇到比这个选择器权重大的选择器，那么CSS就会执行那个权重更大的选择器中设置的属性）

当遇到复合选择器时，该复合选择器的权重会进行叠加

权重虽然会叠加，但永远不会进位

posted on 2026-01-27 19:23 ljbguanli 阅读(0) 评论(0) 收藏举报