如何排除 CSS 格式?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6585924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:56:11  来源:igfitidea点击:

How to exclude a CSS formatting?

css

提问by Joe Huang

Possible Duplicates:
How do I prevent CSS inheritance?
is there a way to exclude a tag from css class

可能的重复:
如何防止 CSS 继承?
有没有办法从css类中排除标签

I have CSS like this

我有这样的 CSS

.div1 img {
  // ...
}

.myimg {
  // ...
}

and my HTML code is like this,

而我的 HTML 代码是这样的,

<div class="div1">
    ...
    <img src="..." class="myimg">      // image html
    ...
</div>

The css formatting defined in .div1 imgis obviously applied to the image html code. However, I actually don't want it happen. What can I do to not to have '.div1 img' effects on that image html code? I don't want to modify the content of div1 imgor related html code because it is used in other places already (and it is a template code that I don't want to mess with).

中定义的 css 格式.div1 img显然适用于图像 html 代码。但是,我实际上不希望它发生。我该怎么做才能不对该图像 html 代码产生“.div1 img”效果?我不想修改div1 img或相关 html 代码的内容,因为它已经在其他地方使用了(而且它是我不想弄乱的模板代码)。

P.S. I cannot remove or modify <div class="div1">either because there is other template code around.

PS 我也无法删除或修改<div class="div1">,因为周围还有其他模板代码。

Thanks.

谢谢。

回答by rockerest

You have two options:

您有两个选择:

  1. You can explicitly override all of the styling defined in .div1 imgwith what they should be in .myimg
  2. You can write .div1 img:not(.myimg)for the first rule.
  1. 您可以.div1 img使用它们应该包含的内容显式覆盖定义的所有样式.myimg
  2. 你可以写.div1 img:not(.myimg)第一条规则。

回答by Nicola Peluchetti

You could do:

你可以这样做:

.div1 img:not(.myimg) {
  // ...
}

:not selector explained here

:not 选择器在这里解释

回答by iamserious

There is a nice little not selectorthat would work, but unfortunately it doesn't work in all browsers.

有一个很好的小不选择器可以工作,但不幸的是它不适用于所有浏览器。

One sure way to do that is redefine all your .div1styles in your child .myingclass so it overrides the parent.

一种可靠的方法是.div1在子.mying类中重新定义所有样式,使其覆盖父类。

here is a little demo in jsfiddle: http://jsfiddle.net/u6MnN/1/

这是 jsfiddle 中的一个小演示:http: //jsfiddle.net/u6MnN/1/

mess around with it and see what's best for you.

弄乱它,看看什么对你最好。

回答by iamserious

If you have img tags inside a container div with class .div1 they will of course get the styling you define in .div1 img, but if you want lets say 2 images out of 8 in that div to have another style (which i believe is why you made class .myimg), you need to put !importantafter the defined stylings in .myimglike so:

如果您在类 .div1 的容器 div 中有 img 标签,它们当然会获得您在其中定义的样式.div1 img,但是如果您想让该 div 中的 8 个图像中有 2 个具有另一种样式(我相信这就是您制作的原因) class .myimg),您需要在定义的样式之后放置!important.myimg如下所示:

.div1 img
{
    height: 125px;
    width: 125px;
}
.myimg
{
    height: 150px !important;
    width: 150px !important;
}

This is only if you are NOT using CSS 3.0

仅当您不使用 CSS 3.0 时

回答by Mo Valipour

you need to neutralize all those stylings you are giving to ".div1 img" for example if you say "width:100px" there you need to say "width:auto" in the other one.

你需要中和所有你给“.div1 img”的样式,例如,如果你说“width:100px”,你需要在另一个中说“width:auto”。

Although if you have lots of rules in the first set it would be very dirty this way and you need to change your layout.

虽然如果你在第一组中有很多规则,这样会很脏,你需要改变你的布局。