Bu öğe kimliğini özellikle CSS ile nasıl hedefleyebilirim?

Question

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

Bir CSS seçici #checkout form.center zaten ben onay formu için özellikle bu geçersiz kılmak istiyoruz

kullanılıyor, ama yazmaya denemek şeylerin hiçbiri uygulanmıyor. #confirmation form.center ya da bir şeyin ilk kuralı hızlandırması gerektiğini düşünmeliyim, ama hedefi vurmuş gibi görünmüyor. #confirmation yukarıda belirtilen seçici tarafından geçersiz kılınır, çünkü bu belirli bir özellik değildir.

Answer 1

. Her unsur için, özelliklerinden birinin değeri için bir çakışma durumunda, en yüksek özgüllüğe sahip kural öncelik kazanır. Genel olarak, bir CSS seçicideki daha fazla ve daha iyi bilgi, onun özgüllüğü daha büyüktür.

#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 */ 
} 

: Mevcut seçici ( #checkout form.center) uygun bir şey bunu geçersiz kılmak için sağlayacak ekleyerek bu nedenle

,

Answer 2

Özellikle mevcut seçici geçersiz kılmak için gerekiyorsa, kullanın:

#checkout #confirmation 

o olmayan bir #confirmation eleman, içinde oturur form.center seçer çünkü #confirmation form.center çalışmıyor nedeni budur aynı. Bunun yerine şu şekilde yazmış olursunuz:

#checkout form#confirmation.center 

fakat bu yol çok fazladır; Önerdiğim ilk seçici ilk seçmeninizi geçersiz kılacak kadar spesifik.

Her CSS seçici bir specificity değeri vardır: BoltClock en yanıta genişletilmesi