css - Compass/Blueprint 有一个 CSS 规则 "body.bp table"和 "body.bp td"并且弄乱了所有表格，有什么解决方法？

Question

我有 CSS 定义，例如

.one-table
  width: 500px

.one-table td
  padding: 0

但是因为 Compass/Blueprint 0.8.17 有

body.bp table { width: 100% }
body.bp td { padding: 4px }

所以我的 table 乱七八糟。添加 table.one-table 也无济于事。我认为它失去了特异性……这让我感到非常惊讶，因为该类直接放在 table 上，而另一个将类应用到 body 上。为什么要覆盖它，什么是好的解决方法？

我不能使用 id 因为它是一个模板，我需要让它足够通用。我也不愿意使用 !important 因为如果以后 IE css def 也需要使用 important 怎么办。我无法升级到最新的 compass ，因为这样做可能也意味着修复整个网站的问题。谢谢。

Answer 1

这里是如何计算CSS specificity . id 选择器的特异性为 100，类选择器为 10，元素选择器为 1。要计算 CSS 特异性，只需对这些值求和即可。

body.bp table的特异性是12(1 + 10 + 1)而table.one-table是11(1 + 10)，所以body.bp 表 胜出。

要在保留 one-table 类的同时解决此问题，您可以尝试使用这些选择器:

# Specifity is 20 (vs 12).
.bp .one-table
  width: 500px

# Specifity is 21 (vs 12).
.bp .one-table td
  padding: 0

或者您可以只使用相同的选择器并覆盖蓝图规则。不过，这些规则将适用于所有表格。

# This must come after the blueprint rules.
body.bp table
  width: 500px

body.bp td
  padding: 0

似乎蓝图混合的范围是 bp 类。这可能会导致您不得不将 .bp 放在许多 CSS 规则的前面。如果不需要蓝图范围，您应该只使用蓝图的顶级混合:

+blueprint