css - Inheritance

CSS 的继承是指某个元素的某个样式属性可以被它的后代元素继承。具体来说，如果一个元素的某个样式属性没有被显式地设置，那么这个属性就会从它的父元素继承。如果父元素也没有设置这个属性，那么这个属性就会继续向上寻找，直到找到有设置这个属性的元素或者到达根元素为止。

CSS 的继承是一种很方便的样式控制方式，它可以让页面的样式表更加简洁，同时也可以减少代码量，提高开发效率。下面是一些常见的继承属性：

• 字体属性：字体大小、字体样式、字体粗细、字体颜色等属性都是可以被继承的。
• 文本属性：文本对齐方式、文本缩进、行高、文字间距等属性也是可以被继承的。
• 列表属性：列表项的标志、列表项的编号等属性也可以被继承。
• 表格属性：表格的边框、单元格的边框、单元格的背景颜色等属性也可以被继承。

但是并不是所有的样式属性都可以被继承，例如定位、背景图像、边框样式等属性就不能被继承。此外，如果一个元素的某个样式属性被显式地设置了，那么它的后代元素就不会继承这个属性。

需要注意的是，虽然继承可以让样式表更加简洁，但是过度使用继承也可能会造成样式的混乱，特别是当嵌套层级比较深的时候。因此，在使用继承时需要注意权衡利弊，避免过度使用。

案例

1. 字体样式继承

body {
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #333;
}

h1 {
  font-size: 24px; /* h1 标签继承了 body 的字体样式 */
  font-weight: bold; /* h1 标签自己设置了字体粗细 */
  color: red; /* h1 标签自己设置了颜色 */
}

2. 列表样式继承

ul {
  list-style-type: disc;
  color: #333;
}

ul li {
  font-size: 14px;
  color: inherit; /* li 标签继承了 ul 的颜色 */
}

3. 表格样式继承

table {
  border-collapse: collapse;
}

th {
  background-color: #ccc;
  font-weight: bold;
  text-align: center;
}

td {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}

4. 表单样式继承

label {
  font-weight: bold;
  color: #333;
}

input {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 14px;
}

input[type='submit'] {
  background-color: #333;
  color: #fff;
}