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

CSSセレクター#checkout form.centerをすでに使用しています

特に確認フォームのためにこれを上書きしたいのですが、私が書き込もうとしていることはどれも適用されません。か何かが最初のルールに取って代わるべきだと思うべき#confirmation form.centerですが、それは目標を達成していないようです。#confirmation上記のセレクターはそれほど具体的ではないため、オーバーライドされます。

4

2 に答える 2

9

BoltClockの答えを拡張する：

各CSSセレクターには特異性の値があります。各要素について、そのプロパティの1つの値が競合する場合は、最も特異性の高いルールが優先されます。一般に、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  */
}
于 2011-01-11T04:30:25.983 に答える
5

既存のセレクターを具体的にオーバーライドする必要がある場合は、次を使用します。

#checkout #confirmation

#confirmation form.center動作しない理由は、それが要素内にあるものを選択form.centerするためですが、これは同じではありません。代わりに次のように記述します。#confirmation

#checkout form#confirmation.center

しかし、それはやり過ぎです。私が提案する最初のセレクターは、最初のセレクターをオーバーライドするのに十分具体的です。

于 2011-01-11T03:56:16.120 に答える