Published 2022-05-04

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 标签自己设置了颜色 */
}
  1. 列表样式继承
ul {
  list-style-type: disc;
  color: #333;
}
 
ul li {
  font-size: 14px;
  color: inherit; /* li 标签继承了 ul 的颜色 */
}
  1. 表格样式继承
table {
  border-collapse: collapse;
}
 
th {
  background-color: #ccc;
  font-weight: bold;
  text-align: center;
}
 
td {
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}
  1. 表单样式继承
label {
  font-weight: bold;
  color: #333;
}
 
input {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 14px;
}
 
input[type='submit'] {
  background-color: #333;
  color: #fff;
}