如何在CSS中继承属性？附.drop-shadow-red类代码示例

嘿，很高兴能帮你理清CSS属性继承的问题！首先得明确：CSS里大部分文本相关属性（比如font-size、font-weight）是默认继承的，但像padding、background、box-shadow这类布局/装饰属性，默认是不会被子元素继承的。针对你的.drop-shadow-red类，我给你几个实用的实现继承的方法：

1. 用inherit关键字强制继承 #

这是最直接的方式，如果你希望子元素继承父元素（也就是应用了.drop-shadow-red的元素）的某个非默认继承属性，只需要在子元素的样式里把对应属性设为inherit即可。

比如你想让.drop-shadow-red下的所有子元素继承它的内边距、背景样式和阴影，可以这么写：

.drop-shadow-red {
  font-size: 1.5vh;
  padding: 0.4vh 0.7vh;
  background: url(../images/redInvert.png) no-repeat center left;
  background-position: 8px 50%;
  background-size: 2vh;
  background-color: rgba(250, 210, 50, 0.9);
  font-weight: bold;
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset; /* 修正了你代码里的笔误：-mox → -moz */
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

/* 让.drop-shadow-red的所有子元素继承指定属性 */
.drop-shadow-red * {
  padding: inherit;
  background: inherit;
  box-shadow: inherit;
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
}

这样一来，所有子元素就会完全继承父元素的这些属性值了。

2. 使用CSS自定义属性（变量）实现灵活继承 #

如果需要更灵活的控制（比如后续可能修改属性值，或者只让部分子元素继承），用CSS变量是更好的选择。因为CSS变量默认是可以继承的，你只需要在父元素里定义变量，子元素直接引用即可：

/* 先在根元素定义变量（也可以直接在.drop-shadow-red里定义） */
:root {
  --custom-font-size: 1.5vh;
  --custom-padding: 0.4vh 0.7vh;
  --custom-bg: url(../images/redInvert.png) no-repeat center left rgba(250, 210, 50, 0.9);
  --custom-bg-position: 8px 50%;
  --custom-bg-size: 2vh;
  --custom-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow-red {
  font-size: var(--custom-font-size);
  padding: var(--custom-padding);
  background: var(--custom-bg);
  background-position: var(--custom-bg-position);
  background-size: var(--custom-bg-size);
  font-weight: bold;
  -webkit-box-shadow: var(--custom-box-shadow);
  -moz-box-shadow: var(--custom-box-shadow);
  box-shadow: var(--custom-box-shadow);
}

/* 子元素直接引用变量就能继承（甚至可以修改变量值） */
.drop-shadow-red .child-element {
  /* 直接继承所有变量对应的属性 */
  font-size: var(--custom-font-size);
  box-shadow: var(--custom-box-shadow);
  /* 也可以只继承部分，或者修改变量 */
  --custom-padding: 0.6vh 1vh;
  padding: var(--custom-padding);
}

这种方式的好处是，后续要调整样式时，只需要修改变量值，所有引用该变量的元素都会自动更新，非常方便维护。

小提示 #

你原来的代码里有个小笔误：-mox-box-shadow应该是-moz-box-shadow（火狐浏览器的前缀），记得修正哦，不然火狐下的阴影样式可能不生效。

内容的提问来源于stack exchange，提问作者Hristian Yordanov