css三大特性

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性。

覆盖性原则

  1. 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式

  2. 这里要注意只覆盖同样的不可重复的样式属性,不会覆盖允许重复的属性

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>123</div>  <!-- 最终背景颜色是蓝色 -->
    <div>123</div>  <!-- 最终背景颜色是绿色 -->
</body>
</html>

技术分享图片

继承性

继承性是指当子标签没有设置样式时,会继承父标签的样式

子元素可以继承父元素的样式包括:text-文本属性、font-字体属性、line-行高以背景类属性,要注意子标签不会继承父标签的宽度、高度、边距属性

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            font-size:70px;
            background-color: #CCC;
            color:skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>p继承div的样式</p>
    </div>
</body>
</html>

技术分享图片

优先级

当一个元素制定了多个选择器时就会有选择器的优先级

  • 选择器相同,则执行层叠性
  • 选择器不同,优先级为,注意优先级逐级变大
    • 继承的权重为(0,0,0,0)
    • 标签选择器的权重为(0,0,0,1)
    • 类、伪类选择器的权重为(0,0,1,0)
    • id选择器选择器的权重为(0,1,0,0)
    • 行内样式的权重为(1,0,0,0)
    • !important的权重无限大

css三大特性

[db:回答]

以上是css三大特性的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>