css - 如何覆盖特定 div 的最大宽度？

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;
}

我做错了什么？

score 34 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

我认为这是因为a img比更具体#pixel-perfect img。元素选择器比 id 选择器更具体（因此在此示例中，您有 2 个元素与 1 个元素和 1 个 id）。

为了修复它，您必须在声明中添加一个元素，例如：

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

score 0 · Accepted Answer

max-width: auto !important;

max-width 中的 auto 不是有效属性。您应该将其替换为

max-width: none !important;

5 回答 5