如何让CSS opacity仅作用于label文本而非其子元素？

要实现仅让label的文本内容应用透明度，同时不影响其子表单元素，核心是避免使用opacity属性（它会作用于元素及所有子元素），改用以下两种方法：

方法一：无需修改HTML，用颜色透明度模拟 #

将原CSS中的label { opacity: .7; }替换为以下代码：

label {
  /* 用currentColor继承当前文本颜色，设置70%透明度 */
  color: rgba(currentColor, 0.7);
}

/* 重置表单元素的文本颜色，避免继承半透明效果 */
label select {
  color: initial;
}

原理：rgba(currentColor, 0.7)仅改变label文本的颜色透明度，不会影响子元素；color: initial让select恢复浏览器默认文本颜色，确保其不受父元素颜色设置影响。

方法二：给label文本单独包裹span（结构更清晰） #

修改HTML，将label内的文本用<span>包裹：

<div class="colored">
   <label>
      <span>My white label</span>
      <select><option>example that should be black-on-white</option></select>
   </label>
</div>

<div>
   <label>
      <span>My black label</span>
      <select><option>example that should be black-on-white</option></select>
   </label>
</div>
<div> 
<label for="select3">Good example</label>
<select id="select3"><option>example that is indeed black-on-white</option></select></div>

然后CSS仅对span设置透明度：

label span {
  opacity: 0.7;
}

这样只有label的文本部分会应用透明度，select等子元素完全不受影响。

内容的提问来源于stack exchange，提问作者Patrick Szalapski