当前位置 知且行 大前端 css的继承性与层叠性 下一篇:

css的继承性与层叠性

继承性

css中有些属性设置后,其后代元素会继承该属性,如:

可以继承的属性:

  • color
  • text-*,如,text-decoration:underline;
  • font-*, 如,font-size:10px;
  • line-*

不可继承的属性:

  • backgroud-color
  • border
body {
    font-size: 14px;
}

层叠性

css的全称是:Cascading Style Sheets, 即:层叠样式表。说明css的样式是可以叠加的。

如,我们可以通过多个选择器的方式对某个元素添加样式,这些样式是层层叠加的,就好像做蛋糕一样,一层层抹上去

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css</title>
    <style>
        div {
            color: #f00;
        }
        p {
            font-size: 18px;
        }
        .test {
            font-weight: bold;
        }
        div p {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>
        <p class="test">
            测试层叠性
        </p>
    </div>
</body>
</html>

通过 chrome 的调试模式,可以一目了然地看到所有的css样式都叠加了。

那么问题来了,如果样式冲突了,该以哪个为准?

关于样式的权重,简单的计算方式是:id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css</title>
    <style>
        #a {
            color: blue;
        }
        .b {
            color: green;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p id="a" class="b">
        猜猜我是什么颜色
    </p>
</body>
</html>

相对复杂的权重计算方式将在下篇文章介绍

转载必须注明出处:https://www.zhiqiexing.com/13.html

关于我

我希望能成为一个认真、有趣、创造更多价值的人
关注微信
微信扫一扫关注我

微信扫一扫关注我

返回顶部