Existe-t-il un moyen pour que le style de transparence CSS s'applique uniquement au texte interne de l'étiquette et non aux éléments enfants ?

Question

Dans l'exemple ci-dessous, j'ai beaucoup de balises où les balises contiennent des entrées.

Existe-t-il un moyen d'appliquer le style d'opacité CSS au texte interne de l'étiquette plutôt qu'à tout élément enfant sans spécifier explicitement la couleur ? Dans l'exemple ci-dessous, l'opacité a été appliquée au menu déroulant, pas seulement à l'étiquette elle-même.

Je sais que je pourrais modifier l'élément d'étiquette pour simplement entourer le texte, puis ajouter un pour=, mais je préfère enrouler l'étiquette autour de l'élément étiqueté.

div{ padding : 10px;}

sélectionner {
  couleur de fond : blanc ;
}
.coloré{
  Couleur blanche;
  couleur de fond : bleu clair ;
}
   
étiquette {
  opacité : 0,7 ;
}</pré>
<pre class="brush:html;toolbar:false;">
<div class="coloré">
   <étiquette>
      Ma marque blanche
      <select><option>exemple qui doit être en noir sur blanc</option></select>
   </étiquette>
</div>

<div>
   <étiquette>
      Mon étiquette noire
      <select><option>exemple qui doit être en noir sur blanc</option></select>
   </étiquette>
</div>
<div>
<label for="select3">Bon exemple</label>
<select id="select3"><option>exemple qui est bien en noir sur blanc</option></select></div>

Answer 1

Malheureusement, opacity适用于容器和其中的所有内容。但在您的情况下，您可以使用rgba color est remplacé par :

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>