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不起作用的原因是因为选择位于 form.center元素内的#confirmation，这是不一样的。你会把它写成这样：

#checkout form#confirmation.center

但这太过分了;我建议的第一个选择器足以覆盖你的第一个选择器。

如何使用CSS专门定位此元素id？

2 个答案: