如何避免重写css属性?

Take this code:

把这段代码:

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

the width of 100px is being applied only to:

100px的宽度只适用于:

#wh_wrapper -> #slider -> scollButtons left

If I do this:

如果我这样做:

.left {
   width: 50px;
}

all the

所有的

.left

classes has now a width of 50px, including the one from before.

类的宽度现在是50px，包括之前的一个。

Now, I completely understand how to avoid this error (setting specific classes, putting .left before #wh_wrapper #slider .scrollButtons.left etc..) what I'm asking is if there is a way to specify properties that cannot be overwritten by "global" properties.

现在，我完全理解如何避免这个错误(设置特定的类，将.left放在#wh_wrapper #slider . scrollbuttons之前)。我想问的是是否有一种方法可以指定不能被“全局”属性覆盖的属性。

I hope I was able to explain myself.

我希望我能解释清楚。

Thanks

谢谢

EDIT:

编辑:

I now understand !important :-)

我现在明白了!

But look at this other example:

看看另一个例子:

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

.left {
   width: 50px;
}

Now #wh_wrapper #slider .scrollButtons.left will still be 100px, but what about:

现在# wh_wrapper #滑块.scrollButtons。左边仍然是100px，但是:

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

since I haven't decalred a border before I can't put an important on it, still the #wh_wrapper #slider .scrollButtons.left will now have a border property. Any way areound this?

由于我还没有去掉边框，所以我不能在它上面加上一个重要的值，仍然是#wh_wrapper #slider . scrollbuttons。左现在有一个边界属性。任何方式areound呢?

3 个解决方案

#1

Yes, put !important behind them:

是的，放!

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

Watch out though: Internet Explorer 6 and previous versions simply ignore !important, while IE 7 supports them. More info on this can be found here or here.

但是要注意:IE 6和以前的版本完全忽略了!重要的是IE 7支持它们。更多的信息可以在这里或这里找到。

!important is something to consider, butyou should try to avoid it. Most of the times it can be avoided by building a better html/css tree or adding a class (try to keep them generic though ;)).

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

@EDIT: You should always put the most generic selectors on top, and the build down to the more specific ones. for example: put a img{} selector on top to provide a global specifier for all your images, then you go down more and more specific.

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

wrapper img{} wrapper container img{} wrapper container div.something img{}

包装器img{}包装器容器img{}包装器容器div。

and so on. Don't try to overdo the classes and ID's, the more generic your html/css is the better. containers and wrappers are often overused and unnescessary. Try to write good semantic html and keep html and css seperated. Don't use css when you should us HTML (and vice versa)

等等。不要过度使用类和ID, html/css越通用越好。容器和包装器经常被过度使用和未使用。尝试编写良好的语义html，保持html和css分离。当你需要HTML时不要使用css(反之亦然)

Often it is better to create your whole html file, and when everything looks good, provide css for the finishing touch.

通常，最好是创建整个html文件，当一切看起来都很好时，为最后的触摸提供css。

#2

Tried !important?

尝试!重要?

#3

I tested your code in Opera, Chrome, FF and IE and all prefer the first line over the second one, no matter what the order of the rules is. In the sample you pasted there's a space missing in ".scrollButtons.left" - if I use that code then it (of course) always matches the second rule. Are you sure this isn't the problem?

我在Opera、Chrome、FF和IE中测试了你的代码，所有人都喜欢第一行而不是第二行，不管规则的顺序是什么。在您粘贴的示例中，“. scrollbuttons”中缺少了一个空格。如果我使用那个代码，那么它(当然)总是与第二条规则匹配。你确定这不是问题吗?

#1