CSS三大特性

30 阅读1分钟

1.层叠性:覆盖前一个样式

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题

层叠性原则:

  • 样式冲突,遵循就近原则,哪个样式离结构近,就执行哪个样式
  • 样式不冲突,不会层叠

案例:

屏幕截图 2025-10-31 195800.png

2.继承性

CSS中的继承:子标签会继承父标签的某些样式,如文字颜色和字号,简单的理解就是:子承父业。

  • 恰当地使用继承可简化代码,降低CSS样式的复杂性。
  • 子元素可以继承父元素的样式( text- 、 font- 、 line- 这些元素开头的可以继承,以及 color 属性)

案例:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
                color: cyan;
            }
            div {
                background-color: blueviolet;
            }
        </style>
    </head>
    <body>
        <div>
            <p>文字颜色</p>
        </div>
    </body>
</html>

3.优先级

通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式表为1000,!important无穷大 (行内style > id选择器 > 类选择器 > 标签选择器 > 通配符)