CSSでこの要素idを具体的にどのようにターゲットできますか？

Question

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

私はすでに

を使用しているCSSセレクタ#checkout form.centerを持っている私は、特に確認フォームのためにこれを無効にしたいんが、私は適用されます書いてみる事のどれでしょう。私は#confirmation form.centerか何かが最初のルールに取って代わらなければならないと思うべきです、しかしそれは目標を打つように見えません。 #confirmationは、上記のセレクタによって特化されていないため、オーバーライドされます。

Answer 1

BoltClockの答えを拡張します。各CSSセレクタはspecificity値を持つ

。各要素について、そのプロパティの値の競合が発生した場合には、特異度の高いルールが優先されます。一般的に、CSSセレクタの情報がますます高くなるほど、その特異性は高くなります。

このため、既存のセレクタに適切な何か（#checkout form.center）を追加すると、それを上書きすることができます：

#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

あなたが特に既存のセレクタをオーバーライドする必要がある場合には、使用：

#checkout #confirmation 

ことがない#confirmation要素、内を座っform.center選択されるため#confirmation form.centerが動作しない理由は、同じ。あなたは代わりに次のように書いていたでしょう：

#checkout form#confirmation.center 

しかしそれはやりすぎです。私が提案する最初のセレクターは、最初のセレクターをオーバーライドするのに十分な特異性を持っています