Wie alle Elemente css innerhalb div mit Klasse zu übernehmen?

Question

Ich habe html für. Ex. wie folgt aus:

<form class="smart-form"> 
    <div> 
    <p></p> 
    <i></i> 
    <div> 
     <span class="classname"><b>text</b></span> 
    </div> 
    </div> 
</form> 

Und es gibt CSS-Code für alle Formularelemente, aber ich brauche, außer dies für alle Elemente Regeln, die im Inneren .classname sind:

.smart-form *, 
.smart-form *:after, 
.smart-form *:before { 
    margin: 0; 
    padding: 0; 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
} 

ich so versucht:

.smart-form *:not(> .classname *) {} // but its wrong 

Answer 1

von this SO answer von @ BoltClock ♦:

:not() akzeptiert nur jeweils einen einfachen Selektor; Dies wird in den Selektoren 3 Spezifikation erwähnt:

& hellip;

Wenn Sie diese Negation selbst verwenden möchten, indem Sie alle anderen Elemente auswählen, gibt es keine Möglichkeit, nur einen Selektor zu verwenden.

Mit anderen Worten, es gibt keine Möglichkeit, einen Nachkommenselektor innerhalb eines :not() Selektors zu verschachteln.

---

Als Alternative, ich bin ein bisschen wie ein Paradigmenwechsel in Ihrem Ansatz vorschlagen: Anstatt alle Elemente außer innerhalb der Klasse diejenigen auszuwählen .classname, fügen Sie alle Regeln, die Sie für die anderen wollen Elemente und dann umkehren sie durch die Anpassung der .classname Stile. D.h.,:

.smart-form * { 
    /* general CSS styles for .smart-form children */ 
} 
.smart-form .classname, form .classname * { 
    /* specific CSS styles for .classname children */ 
} 

Dies sollte alle Nachkommen auswählen, die .classname der Klasse sind.

.smart-form *, 
 
.smart-form *:after, 
 
.smart-form *:before { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
} 
 

 
/* you can use initial or auto in most cases to set the properties back to default */ 
 
.smart-form .classname, .smart-form .classname * { 
 
    margin: initial; 
 
    padding: initial; 
 
    box-sizing: initial; 
 
    -moz-box-sizing: initial; 
 
}

<form class="smart-form"> 
 
    <div> 
 
    <p></p> 
 
    <i></i> 
 
    <div> 
 
     <span class="classname"><b>text</b></span> 
 
    </div> 
 
    </div> 
 
</form>

Im obigen Beispiel werden die Stile alle die Elemente gesetzt, aber dann werden sie durch die, die nur für .classname umgekehrt.

Answer 2

Ich denke, dass Sie nicht css darauf setzen sollten und nur css auf, wo Sie in Ihrem div wollen. Was ist der Sinn von CSS, wenn Sie nur eine Ausnahme haben wollen?