有没有办法让CSS的透明度样式只应用于标签的innerText，而不应用于任何子元素？

Question

在下面的示例中，我有很多标签，其中标签包含输入。

有没有办法使CSS的不透明度样式应用于标签的innerText而不是任何子元素，而不需要显式指定颜色？在下面的示例中，不透明度已经应用于下拉菜单，而不仅仅是标签本身。

我知道我可以将标签元素更改为仅包围文本，然后添加一个for=，但我更喜欢将标签包裹在被标记的元素周围。

div{ padding: 10px;}

select {
  background-color: white;
}
.colored{
  color: white; 
  background-color: lightblue;
}
   
label {
  opacity: .7;
}

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

<div>
   <label>
      My black label
      <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>

Answer 1

很不幸，opacity适用于容器和其中的所有内容。但在您的情况下，您可以使用rgba color代替：

select {
  background-color: white;
}
.colored{
  color: white; 
  background-color: lightblue;
  padding: 10px;
}

label {
  color: rgba(255, 255, 255, .7);
}

<div class="colored">
   <label>
      我的标签
      <select><option>示例</option></select>
   </label>