面试题：CSS高级难度面试题：利用继承与层叠减少代码

Question

在一个页面中有多个不同类别的元素，比如文章标题（.article - title）、段落（.article - paragraph）和列表项（.article - list - item），它们都需要设置相同的字体家族（如 'Arial, sans - serif'）和颜色（如 #333）。请使用CSS的继承和层叠特性，以尽可能减少冗余代码的方式实现这一需求，并阐述原理。

Answer 1

CSS代码实现

body {
  font - family: 'Arial, sans - serif';
  color: #333;
}
.article - title,
.article - paragraph,
.article - list - item {
  /* 此处无需重复设置font - family和color，继承自body */
}

原理阐述

1. 继承：CSS的继承特性允许元素从其父元素继承某些属性。在上述代码中，body元素设置了font - family和color属性。由于.article - title、.article - paragraph和.article - list - item都是body元素的后代元素，它们会自动继承body元素的font - family和color属性，从而无需在每个具体的类上重复设置这些属性。
2. 层叠：当多个样式规则应用到同一个元素时，层叠特性决定了最终应用的样式。这里body元素的样式规则是基础设置，对于.article - title、.article - paragraph和.article - list - item，如果它们没有自己单独设置font - family和color属性，就会按照继承机制使用body元素的样式。如果这些元素有自己的样式设置，根据层叠规则，更具体的样式（如直接在这些类上设置的样式）会覆盖继承的样式。通过这种方式，利用继承和层叠，减少了冗余代码，使样式表更加简洁和易于维护。