指南针/蓝图有一个 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.one-table 也没有帮助。我认为它正在失去特异性......我对此感到非常惊讶，因为该类直接位于表格上，而另一个类则将类应用于body。为什么它会被覆盖？有什么好的解决方法吗？

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

Answer 1

以下是计算 CSS 特异性的方法。 id 选择器的特异性为 100，类选择器为 10，元素选择器为 1。要计算 CSS 特异性，只需将这些值相加即可。

body.bp table 的特异性为 12 (1 + 10 + 1)，table.one-table 为 11 (1 + 10)，因此 body.one-table 的特异性为 12 (1 + 10 + 1)。 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

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

+blueprint