代码之家 › 专栏 › 技术社区 › nonopolarity

Compass/Blueprint有一个CSS规则“body.bp table”和“body.bp td”,把所有的表都弄乱,什么是解决方法?

compass-sass blueprint-css rubygems css

nonopolarity · 技术社区 · 14 年前

我有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呢。我不能升级到最新的指南针,因为这样做可能意味着修复整个网站的东西。谢谢。

1 回复 | 直到 13 年前

htanata 14 年前

这里有一个计算方法 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规则面前。如果蓝图作用域不是必需的,则应该只使用蓝图的顶层MIXIN:

+blueprint

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前