CSS 继承与层叠

CSS 继承与层叠是 CSS 中最重要的概念之一，它们决定了样式如何应用到元素上。理解继承与层叠对于掌握 CSS 至关重要。

继承

什么是继承

继承是指子元素自动继承父元素的某些样式属性。继承可以减少代码重复，提高代码的可维护性。

可继承的属性

某些 CSS 属性是可以继承的，包括：

/* 文本相关属性 */
color {
  color: #333;
}

font-size {
  font-size: 16px;
}

font-family {
  font-family: Arial, sans-serif;
}

line-height {
  line-height: 1.6;
}

text-align {
  text-align: center;
}

不可继承的属性

某些 CSS 属性是不可继承的，包括：

/* 盒模型属性 */
width {
  width: 100%;
}

height {
  height: 100px;
}

padding {
  padding: 20px;
}

margin {
  margin: 20px;
}

border {
  border: 1px solid #333;
}

/* 背景属性 */
background-color {
  background-color: #f5f5f5;
}

继承的实际应用

/* 继承的实际应用 */
body {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 子元素继承父元素的样式 */
.container p {
  /* 继承 body 的 color、font-size、font-family、line-height */
}

.container h1 {
  /* 继承 body 的 color、font-family、line-height */
  /* 但 font-size 可能被覆盖 */
}

层叠

什么是层叠

层叠是指当多个样式规则应用到同一个元素时，浏览器如何确定最终应用的样式。层叠考虑了样式的来源、优先级和特异性。

样式的来源

CSS 样式有三个来源：

1. 浏览器默认样式：浏览器提供的默认样式
2. 用户样式：用户自定义的样式
3. 作者样式：网页开发者编写的样式

/* 浏览器默认样式 */
/* 浏览器自动应用 */

/* 用户样式 */
/* 用户通过浏览器设置自定义样式 */

/* 作者样式 */
/* 网页开发者编写的样式 */
body {
  color: #333;
}

样式的优先级

样式的优先级从高到低为：

1. !important：最高优先级
2. 内联样式：通过 style 属性设置的样式
3. ID 选择器：通过 ID 选择器设置的样式
4. 类选择器：通过类选择器设置的样式
5. 标签选择器：通过标签选择器设置的样式
6. 通配符选择器：通过通配符选择器设置的样式
7. 浏览器默认样式：最低优先级

/* !important - 最高优先级 */
.text {
  color: red !important;
}

/* 内联样式 */
<p style="color: blue;">文本</p>

/* ID 选择器 */
#text {
  color: green;
}

/* 类选择器 */
.text {
  color: yellow;
}

/* 标签选择器 */
p {
  color: orange;
}

/* 通配符选择器 */
* {
  color: purple;
}

特异性

什么是特异性

特异性是指选择器的权重，用于确定当多个选择器应用到同一个元素时，哪个选择器的样式优先级更高。

特异性的计算

特异性的计算规则：

• 内联样式：1000
• ID 选择器：100
• 类选择器、属性选择器、伪类选择器：10
• 标签选择器、伪元素选择器：1
• 通配符选择器：0

/* 内联样式 - 特异性 1000 */
<p style="color: red;">文本</p>

/* ID 选择器 - 特异性 100 */
#text {
  color: blue;
}

/* 类选择器 - 特异性 10 */
.text {
  color: green;
}

/* 标签选择器 - 特异性 1 */
p {
  color: yellow;
}

/* 通配符选择器 - 特异性 0 */
* {
  color: orange;
}

特异性的示例

/* 特异性 1 */
p {
  color: red;
}

/* 特异性 10 */
.text {
  color: blue;
}

/* 特异性 11 */
p.text {
  color: green;
}

/* 特异性 100 */
#text {
  color: yellow;
}

/* 特异性 101 */
p#text {
  color: orange;
}

/* 特异性 110 */
#text.text {
  color: purple;
}

层叠的实际应用

样式冲突

/* 样式冲突 */
.text {
  color: red;
}

.text {
  color: blue;
}

/* 最终应用 blue，因为后定义的样式优先级更高 */

特异性计算

/* 特异性计算 */
p {
  color: red;  /* 特异性 1 */
}

.text {
  color: blue;  /* 特异性 10 */
}

p.text {
  color: green;  /* 特异性 11 */
}

#text {
  color: yellow;  /* 特异性 100 */
}

/* 最终应用 yellow，因为特异性最高 */

!important 的使用

/* !important 的使用 */
.text {
  color: red !important;
}

#text {
  color: blue;
}

/* 最终应用 red，因为 !important 优先级最高 */

继承与层叠的最佳实践

1. 避免过度使用 !important

/* 不推荐 - 过度使用 !important */
.text {
  color: red !important;
  font-size: 16px !important;
}

/* 推荐 - 使用选择器提高特异性 */
.container .text {
  color: red;
  font-size: 16px;
}

2. 使用类选择器而不是标签选择器

/* 不推荐 - 使用标签选择器 */
p {
  color: #333;
}

/* 推荐 - 使用类选择器 */
.text {
  color: #333;
}

3. 避免选择器过于复杂

/* 不推荐 - 选择器过于复杂 */
.container .sidebar .menu .item .link {
  color: #333;
}

/* 推荐 - 使用简单的类选择器 */
.link {
  color: #333;
}

4. 利用继承减少代码重复

/* 推荐 - 利用继承 */
body {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 不推荐 - 重复设置样式 */
p {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

h1 {
  color: #333;
  font-size: 32px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

总结

CSS 继承与层叠是 CSS 中最重要的概念之一：

1. 继承：子元素自动继承父元素的某些样式属性
2. 可继承的属性：文本相关属性等
3. 不可继承的属性：盒模型属性、背景属性等
4. 层叠：当多个样式规则应用到同一个元素时，浏览器如何确定最终应用的样式
5. 样式的来源：浏览器默认样式、用户样式、作者样式
6. 样式的优先级：!important、内联样式、ID 选择器、类选择器、标签选择器
7. 特异性：选择器的权重，用于确定样式的优先级
8. 最佳实践：避免过度使用 !important、使用类选择器、避免选择器过于复杂、利用继承减少代码重复

记住以下几点：

• 理解继承的概念和可继承的属性
• 掌握层叠的规则和样式的优先级
• 学会计算选择器的特异性
• 避免样式冲突和过度使用 !important
• 遵循继承与层叠的最佳实践