如何避免覆盖css属性？

Question

拿这段代码：

#wh_wrapper #slider .scrollButtons.left {
  width: 100px;
}

100px的宽度仅适用于：

#wh_wrapper -> #slider -> scollButtons left

如果我这样做：

.left {
   width: 50px;
}

所有

.left

类的宽度现在为50px，包括之前的那个。

现在，我完全理解如何避免这个错误（设置特定的类，在#wh_wrapper #slider .scrollButtons.left等之前放置.left）。我问的是，如果有办法指定不能的属性被“全球”财产覆盖。

我希望我能解释自己。

由于

编辑：

我现在明白了！重要的是： - ）

但是看看另一个例子：

#wh_wrapper #slider .scrollButtons.left {
  width: 100px !important;
}

.left {
   width: 50px;
}

现在#wh_wrapper #slider .scrollButtons.left仍然是100px，但是：

.left {
   width: 50px;
   border: 1px solid #000;
}

因为在我无法对其进行重要处理之前我没有对边框进行十分转换，所以#wh_wrapper #slider .scrollButtons.left现在仍然具有border属性。 这有什么意思吗？

Answer 1

是的，将!important置于其后：

.class{
 height:100px !important;
 width: ...etc
}

注意：Internet Explorer 6和以前的版本只是忽略!important，而IE 7支持它们。有关此问题的更多信息，请访问here或here。

!important需要考虑，但你应该尽量避免它。大多数情况下，可以通过构建更好的html / css树或添加类来避免这种情况（尝试保持它们通用;）。

@EDIT：您应该始终将最通用的选择器放在最顶层，将构建放在更具体的选择器上。例如：在顶部放置一个img {}选择器，为你的所有图像提供全局说明符，然后你会越来越具体。

wrapper img {} 包装容器img {} 包装容器div.something img {}

等等。不要试图过度使用类和ID，你的html / css越通用越好。容器和包装器经常被过度使用和不必要。尝试写好semantic html并保持html和css分离。你应该使用HTML时不要使用css（反之亦然）

通常最好创建整个html文件，当一切看起来都很好时，提供完成触摸的CSS。

Answer 2

试过！重要吗？

Answer 3

我在Opera，Chrome，FF和IE中测试了你的代码，无论规则的顺序是什么，所有人都更喜欢第一行而不是第二行。在你粘贴的样本中，“。scrollButtons.left”中缺少一个空格 - 如果我使用该代码，那么它（当然）总是匹配第二个规则。你确定这不是问题吗？