Wie kann ich diese Element-ID mit CSS gezielt ansprechen?

Question

<div id=checkout> 
<form id="confirmation" class="center"> 
<p>content</p> 
</form> 
</div> 

Ich habe einen CSS-Selektor #checkout form.center bereits

verwendet ich mag dies für das Bestätigungsformular ausdrücklich außer Kraft zu setzen, aber keines der Dinge, die ich versuche angewandt zu schreiben zu bekommen. Ich sollte denken, dass #confirmation form.center oder etwas die erste Regel übertreffen sollte, aber es scheint nicht einmal das Ziel zu treffen. #confirmation wird durch den oben genannten Selektor überschrieben, weil es nicht so spezifisch ist.

Answer 1

Erweiterung auf BoltClock Antwort:

Jeder CSS-Selektor hat einen specificity Wert. Für jedes Element hat im Falle eines Konflikts für den Wert einer seiner Eigenschaften die Regel mit höchster Spezifität Vorrang. Im Allgemeinen gilt, je mehr und bessere Informationen in einem CSS-Selektor, desto größer ist seine Spezifität.

Aus diesem Grunde etwas angemessen zu Ihrem bestehenden Selektor hinzugefügt (#checkout form.center) ermöglicht es Ihnen, es außer Kraft zu setzen:

#checkout form.center { 
    /* your existing CSS */ 
} 

#checkout #confirmation { 
    /* your overrides; this has higher specificity */ 
} 

#checkout form#confirmation { 
    /* this would also work -- even higher specificity */ 
} 

#checkout form#confirmation.center { 
    /* even higher */ 
} 

#checkout form.center p { 
    /* works inside the p only, but also has 
    greater specificity than #checkout form.center */ 
} 

Answer 2

Wenn Sie gezielt Ihre vorhandenen Wähler außer Kraft setzen, verwenden:

#checkout #confirmation 

Der Grund, warum #confirmation form.center nicht funktioniert, ist, weil das form.center auswählt, die innerhalb ein #confirmation Element sitzt, das nicht das ist gleich. Sie hätten es stattdessen so geschrieben:

#checkout form#confirmation.center 

aber das ist wie Overkill; Der erste von mir vorgeschlagene Selektor ist spezifisch genug, um den ersten Selektor außer Kraft zu setzen.