html - 如何避免覆盖 css 属性？

Question

拿这段代码:

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

100px 的宽度仅适用于:

#wh_wrapper -> #slider -> scollButtons left

如果我这样做:

.left {
   width: 50px;
}

所有

.left

classes 现在的宽度为 50px，包括之前的宽度。

现在，我完全明白如何避免这个错误(设置特定的类，将 .left 放在#wh_wrapper #slider .scrollButtons.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 现在仍然具有边框属性。有什么办法解决这个问题吗？

Answer 1

是的，把 !important 放在它们后面:

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

不过要注意:Internet Explorer 6 和以前的版本会简单地忽略 !important，而 IE 7 支持它们。有关这方面的更多信息，请参见 here或 here .

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

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

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

等等。不要试图过度使用类和 ID，您的 html/css 越通用越好。容器和 wrapper 经常被过度使用和不必要。努力写好semantic html并保持 html 和 css 分离。当你应该使用 HTML 时不要使用 css(反之亦然)

通常最好创建整个 html 文件，当一切看起来都不错时，提供 css 作为画龙点睛之笔。