如何使用 CSS 专门针对此元素 ID？答案

【问题标题】：How can I specifically target this element id with CSS?如何使用 CSS 专门针对此元素 ID？
【发布时间】：2011-06-06 22:38:40
【问题描述】：

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

我有一个 CSS 选择器 #checkout form.center 已被使用

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

【问题讨论】：

标签： html css css-selectors css-specificity

【解决方案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  */
}

【讨论】：

【解决方案2】：

如果您需要专门覆盖现有选择器，请使用：

#checkout #confirmation

#confirmation form.center 不起作用的原因是因为它选择了位于在 #confirmation 元素中的form.center，这是不一样的。你可以这样写：

#checkout form#confirmation.center

但这太过分了；我建议的第一个选择器足够具体，可以覆盖您的第一个选择器。

【讨论】：