Alle untergeordneten Elemente eines deaktivierten oder schreibgeschützten Elements mit CSS (SASS) formatieren

Question

Es wäre schön, wenn Sie mir sagen könnten, wie alle untergeordneten Elemente eines deaktivierten oder schreibgeschützten DOM-Elements formatiert werden.

Mein HTML-Code sieht wie folgt aus:

<div class="wrapper" disabled="disabled"> 
    <label> 
      Test 
      <input type="text"> 
    </label> 
</div> 

und mein SCSS-Code wie folgt:

.wrapper:disabled{ 
    *{ 
     background-color: grey; 
    } 
} 

Aber es spielt keine Rolle, ob das .wrapper Element deaktiviert ist oder nicht, Der Star-Stil von .wrapper ist dominant.

Gibt es eine Möglichkeit, diesen Stil zu unterdrücken, bis das Eltern-Div nicht deaktiviert ist?

Answer 1

.wrapper[disabled] * { 
 
     background-color: grey; 
 
}

<div class="wrapper" disabled="disabled"> 
 
    <label> 
 
      Test 
 
      <input type="text"> 
 
    </label> 
 
</div>

Der CSS-Selektor sollten Sie .wrapper [disabled]