css层叠样式表css层叠样式表每个html标签都拥有完整的css样式，如果我们没有书写样式表，那么就会运用浏览器的默

css层叠样式表

每个html标签都拥有完整的css样式，如果我们没有书写样式表，那么就会运用浏览器的默认样式表。这就是为什么我们开发页面时，会初始化一些默认样式，主要是去覆盖浏览器自带的默认样式。

1、计算层叠(权重关系)

对于样式表的类型我们有：内联样式、外部样式表(link标签引入)、内部样式表(style标签)、用户代理样式表(浏览器默认样式)。

内联样式的优先级是最高的，它不会去计算样式的权重关系。
外部样式表、内部样式表，在权重一样的情况下，后来者居上，不存在权重一样的情况下，内部样式表优先生效。
权重关系：内联样式 > ID选择器 > Class选择器/属性选择器 > 元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div #pid {
            color: yellow;
        }
        div p {
            color: gray;
        }
    </style>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>
        <p style="color:green;">Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>

div .pclass{
    color: red;
}

div p{
    color: green;
}

这里p标签使用了内联样式，无关权重，优先级最高，页面展示效果：

如果样式使用了 !important进行描述，那么优先级最高，一般不建议使用，不利于网页后期维护。

2、继承

在我们没有给元素添加某些样式的时候，它可能会继承父元素的样式，常见的继承元素有：color、font-family、font-size、line-height、text-align、visibility

div{
    text-align: center;
}

3、赋予默认值

剩下的css属性，用户没有设置或通过继承设置，则使用游览器的默认值。