如何覆盖特定div的max-width？

Question

我正在寻找以下解决方案。在我的CSS中，我有以下内容：

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

此代码对于我的WordPress主题和响应式网页设计是必需的。现在我想将max-width属性覆盖为auto。当我这样做时，它不会覆盖：

#pixel-perfect img {
    max-width: auto !important;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

我做错了什么？

Answer 1

您是否只想取消 max-width属性？如果是这样，请尝试：

#pixel-perfect img {
    max-width: none;
}

Answer 2

使用inherit，none或initial重置。

jsFiddle example - 它有效。

#pixel-perfect img {
    max-width: inherit;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

According to MDN，none是max-width的默认值。

此外，由于您要覆盖属性，因此请确保所需属性位于要覆盖的初始值之前。级联样式表是从上到下阅读的，因此，如果样式表中max-width:100%出现在max-width:inherit下面，它将覆盖它，使max-width:inherit无效。

除此之外，特异性可能是一个问题。但是，由于您的初始声明不是非常具体，因此不太可能。

Answer 3

我认为这是因为a img比#pixel-perfect img更具体。元素选择器比id选择器更具体（所以在这个例子中你有2个元素vs 1元素和1个id）。

为了解决这个问题，您必须在声明中添加一个元素，例如：

a#pixel-perfect img {
    max-width: auto !important;
}

Answer 4

确保您的#pixel-perfect img CSS声明低于img, a img声明，否则会被覆盖。

#pixel-perfect img {
    max-width: none;
    width: auto;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

Answer 5

max-width: auto !important;

自动最大宽度不是有效属性。你应该用

替换它

max-width: none !important;