CSS之魅力所在，层叠、权重与继承🎨

# 译文

CSS，作为一种强大的样式表语言，在前端开发中扮演着至关重要的角色。它能够控制网页的布局、字体、颜色、动画等，使网页呈现出丰富多彩的视觉效果。在CSS中，有三大特性，它们是：层叠、权重、继承。

## 层叠

层叠是指当网页中有多个样式规则作用于同一个元素时，浏览器会根据一定的规则来决定应用哪一个样式规则。这个规则就是层叠规则。层叠规则的具体内容包括：

• 专一性原则 ：即如果某个样式规则与元素匹配得越专一，那么这个样式规则的优先级就越高。
• 继承性原则 ：即子元素会继承父元素的样式。
• 就近原则 ：即当多个样式规则都与元素匹配时，最近的样式规则优先级最高。

## 权重

权重是CSS中衡量样式规则优先级的一种机制。权重越大，样式规则的优先级就越高。权重可以分为两种：

• 固有权重 ：即每个HTML元素都具有的固有权重。比如，元素的固有权重是10，元素的固有权重是100。
• 计算权重 ：即通过CSS规则计算出来的权重。计算权重等于所有选择器的权重之和。比如，选择器#id的权重是100，选择器.class的权重是10。那么，选择器#id.class的权重就是110。

## 继承

继承是指子元素会继承父元素的样式。这种继承关系是通过CSS的层叠规则实现的。比如，父元素有一个样式规则color: red;，那么子元素也会继承这个样式规则，并应用到自己的文本颜色上。

## 实战案例

现在，让我们通过几个实际案例来加深对CSS三大特性的理解。

案例1：层叠

<div id="id">
  <p class="class">文本</p>
</div>

#id {
  color: red;
}

.class {
  color: blue;
}

在这个案例中，元素p有两个样式规则，分别来自父元素div和自己。根据层叠规则，p元素的样式将由最近的样式规则决定，也就是.class的样式规则。因此，p元素的文本颜色将是蓝色。

案例2：权重

<div id="id" class="class">
  <p>文本</p>
</div>

#id {
  color: red;
}

.class {
  color: blue;
}

p {
  color: green;
}

在这个案例中，元素p的样式由权重决定的。#id的选择器权重是110，.class的选择器权重是10，p的选择器权重是1。因此，p元素的样式将由#id的选择器决定，文本颜色将是红色。

案例3：继承

<div id="id">
  <p>文本</p>
</div>

#id {
  color: red;
}

在这个案例中，元素p继承了父元素div的样式。因此，p元素的文本颜色将是红色。

## 结语

CSS三大特性是CSS的重要组成部分，也是前端开发人员必须掌握的基础知识。通过对这三大特性的理解和应用，我们可以更有效地控制网页的样式，打造出更美观、更具用户体验的网页。