如何仅为父元素应用样式而不改变子元素样式？（以透明度为例）

为什么你的当前方法无效 #

opacity 属性会被子元素继承，父元素设置透明度后，子元素的 opacity: 1 实际上是相对于父元素的透明度计算的，所以子元素还是会跟着父元素变透明，!important 也无法改变这个继承特性。

可行解决方案：使用 rgba/hsla 控制背景透明度 #

不要用 opacity 属性，直接用带透明度的颜色值设置父元素的背景色，这样只会影响父元素的背景，不会让子元素继承透明度。

修改后的CSS代码如下：

.larger-box{
  width: 10rem;
  height: 10rem;
  /* rgba(红, 绿, 蓝, 透明度)，透明度取值0-1 */
  background-color: rgba(255, 0, 0, 0.5);
}
.smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  /* 不需要额外设置opacity，保持默认即可 */
}

拓展：如果父元素有其他样式需要透明 #

如果父元素的边框、文字等也需要透明，同样可以用 rgba 设置对应属性：

.larger-box{
  width: 10rem;
  height: 10rem;
  background-color: rgba(255, 0, 0, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.6);
}

这样设置后，父元素的背景、边框、文字都带透明度，而子元素的所有样式都不受影响，保持原本的不透明状态。

内容的提问来源于stack exchange，提问作者Nikola Lazarov