如何避免覆盖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支持它们.有关这方面的更多信息可以在这里或这里找到.

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

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

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

等等.不要试图过度使用类和ID,你的html/css越通用越好.容器和包装器经常被过度使用和不必要.尝试编写好的语义html并保持html和css分离.你应该使用HTML时不要使用css(反之亦然)

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