Question

可能重复：
  How do I prevent CSS inheritance?
  is there a way to exclude a tag from css class

我有这样的CSS

.div1 img {
  // ...
}

.myimg {
  // ...
}

我的HTML代码就像这样，

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

.div1 img中定义的css格式显然适用于图像html代码。但是，我实际上并不希望它发生。我该怎么办才能不对该图像html代码产生'.div1 img'效果？我不想修改div1 img或相关html代码的内容，因为它已经在其他地方使用过（而且它是一个我不想搞砸的模板代码）。

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

感谢。

Answer 1

您有两种选择：

您可以明确覆盖.div1 img中定义的所有样式与.myimg
您可以为第一条规则编写.div1 img:not(.myimg)。

Answer 2

你可以这样做：

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

：not selector解释here

Answer 3

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

一种确定的方法是重新定义您的孩子.div1课程中的所有.mying个样式，以便它覆盖父级。

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

搞乱它，看看什么对你最好。

Answer 4

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

虽然如果你在第一组中有很多规则，那么这种方式会很脏，你需要改变你的布局。

Answer 5

如果你在带有.div1类的容器div里面有img标签，他们当然会得到你在.div1 img中定义的样式，但是如果你想要让那个div中的8个图像中的2个图像有另一个样式（我相信这就是为什么你上课.myimg），你需要在.myimg中定义样式之后加上！important ，如下所示：

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

仅当您不使用CSS 3.0

时

如何排除CSS格式？

5 个答案: