如何排除CSS格式？

Question

可能的重复问题：
如何防止CSS继承？
有没有一种方法可以从CSS类中排除标记？

我的CSS代码如下：

.div1 img {
  // ...
}

.myimg {
  // ...
}

"我的HTML代码是这样的，"

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

在.div1 img中定义的CSS格式显然应用于图像HTML代码。但是，我实际上不希望这种情况发生。我该怎么做才能不让'.div1 img'影响该图像HTML代码？我不想修改div1 img或相关的HTML代码，因为它已经在其他地方使用（而且它是一个模板代码，我不想乱搞）。

P.S. 我也不能删除或修改<div class="div1">，因为周围还有其他模板代码。

谢谢。

- Joe Huang

---

是的，“not选择器”是有效的，但我更希望有一种能够支持IE的解决方案。所以我猜覆盖它可能是唯一的解决办法。 - Joe Huang

Answer 1

你有两种选择：

1. 你可以明确地覆盖 .div1 img 中定义的所有样式，使用在 .myimg 中应有的样式。
2. 你可以对第一条规则写成 .div1 img:not(.myimg)。

- rockerest

Answer 2

你可以做以下事情：

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

解释:not选择器详解，这里

- Nicola Peluchetti

Answer 3

有一个很好的小型not选择器可以使用，但不幸的是它并不适用于所有浏览器。

确保实现方法是在子类.mying中重新定义所有.div1样式以覆盖父级样式。

这里有一个jsfiddle的小演示：http://jsfiddle.net/u6MnN/1/

随意尝试一下，看看哪个最适合你。

- iamserious

Answer 4

如果您在一个类名为

的容器div中有img标签，它们当然会获得您在

中定义的样式，但是如果您想让该div中的8个图像中的2个具有另一种样式（我相信这就是您创建class <.myimg>的原因），则需要在<.myimg>中定义的样式后面加上!important，如下所示：

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

这仅适用于您未使用CSS 3.0的情况

- user557419

Answer 5

如果你给".div1 img"这样的元素添加了一些样式，比如说"width:100px"，那么在另一个地方你需要将其改为"width:auto"，以达到中和的效果。

不过，如果你在第一组规则中有很多样式，这种方法会变得非常混乱，你可能需要改变你的布局。

- Mo Valipour