0

我有 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 也需要使用重要怎么办。我无法升级到最新的指南针，因为这样做可能也意味着要修复整个网站的问题。谢谢。

4

1 回答 1

1

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

body.bp table的特异性是 12 (1 + 10 + 1) 和table.one-table11 (1 + 10)，所以body.bp table获胜。

要在保留课程的同时解决此问题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

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

+blueprint
于 2010-11-05T05:40:56.000 回答