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

我已经#checkout form.center使用了一个 CSS 选择器

我想专门为确认表覆盖它，但我尝试写的东西都没有得到应用。我应该认为#confirmation form.center或​​者某些东西应该取代第一条规则，但它甚至似乎没有达到目标。#confirmation被上面提到的选择器覆盖，因为它不是那么具体。

4

2 回答 2

9

Expanding on BoltClock's answer:

Each CSS selector has a specificity value. For each element, in case of a conflict for the value of one of its properties, the rule with highest specificity takes precedence. Generally, the more and better information in a CSS selector, the greater its specificity.

For this reason, adding something appropriate to your existing selector (#checkout form.center) will enable you to override it:

#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 回答