Gibt es eine Möglichkeit, den CSS-Transparenzstil nur auf den innerText des Etiketts und nicht auf untergeordnete Elemente anzuwenden?

Question

Im folgenden Beispiel habe ich viele Tags, bei denen die Tags Eingaben enthalten.

Gibt es eine Möglichkeit, den CSS-Deckkraftstil auf den inneren Text des Etiketts und nicht auf untergeordnete Elemente anzuwenden, ohne die Farbe explizit anzugeben? Im folgenden Beispiel wurde die Deckkraft auf das Dropdown-Menü angewendet, nicht nur auf die Beschriftung selbst.

Ich weiß, dass ich das Beschriftungselement so ändern könnte, dass es den Text einfach umschließt, und dann einen for= hinzufügen könnte, aber ich ziehe es vor, die Beschriftung um das zu markierende Element zu wickeln.

div{ padding: 10px;}

wählen {
  Hintergrundfarbe: weiß;
}
.farbig{
  Farbe weiß;
  Hintergrundfarbe: hellblau;
}
   
Etikett {
  Deckkraft: .7;
}

<div class="colored">
   <Label>
      Mein White-Label
      <select><option>Beispiel, das schwarz auf weiß sein sollte</option></select>
   </label>
</div>

<div>
   <Label>
      Mein schwarzes Etikett
      <select><option>Beispiel, das schwarz auf weiß sein sollte</option></select>
   </label>
</div>
<div>
<label for="select3">Gutes Beispiel</label>
<select id="select3"><option>Beispiel, das tatsächlich schwarz auf weiß ist</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>