有沒有辦法讓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>