为什么设置 max-width 会使使用更具体的选择器设置宽度无效？

编程问答 2022-05-03

问题描述

在以下代码段中，我使用 img.icon 选择器指定图像的像素宽度。但是，当我缩小浏览器的大小时，图像也会缩小。如果删除注释行，则在调整浏览器大小时图像的大小不会改变。为什么？

我不明白 max-width: 100% 如何影响它，也是因为选择器 img 不如 img.icon 特定。发生了什么？

我想要一个解释 max-width 和 width 如何相互作用的答案，因为我认为我误解了其中一个或两个的含义。

关于规则集 img { max-width: 100%; }，Keith J. Grant 在他的书中建议：

提示作为流体布局的一部分，您应该始终确保图像不会溢出其容器的宽度。帮自己一个忙，并始终将此规则添加到您的样式表中以防止发生这种情况：img { max-width: 100%; }。

所以我想保留它。

img { max-width: 100%; } /* because of this,the size of the image is not fixed. Why? */

img.icon {
  width: 500px;
}
<img class="icon" src="https://image.shutterstock.com/image-vector/example-red-square-grunge-stamp-260nw-327662909.jpg" alt="Home"/>

解决方法

来自MDN

max-width CSS 属性设置元素的最大宽度。它防止宽度属性的使用值变得大于 max-width 指定的值

和：

CSS 属性的使用值是所有计算后的值 已对计算值执行。

用户代理完成计算后，每个 CSS 属性 有使用价值。

因此，系统说您的 max-width 是 img 中设置的那个，这就是使用的值。使用的宽度值是 img.icon 中设置的 500px，但如果它大于计算的 max-width，则 max-width 获胜。

,

来自the specification：

以下算法描述了这两个属性如何影响 'width' 属性的使用值：

  1. 暂定使用的宽度是按照上面“计算宽度和边距”下的规则计算的（没有“最小宽度”和“最大宽度”）。
  2. 如果暂定使用的宽度大于'max-width'，则再次应用上述规则，但这次使用'max-width'的计算值作为计算值“宽度”的值。
  3. 如果结果宽度小于'min-width'，则再次应用上述规则，但这次使用'min-width'的值作为计算值'宽度'。

我认为该算法是不言自明的，这里是另一个使用 min-width 来查看发生了什么的示例：

img {
  max-width: 100%;
  width: 500px;
  min-width: 800px;
}
<img class="icon" src="https://image.shutterstock.com/image-vector/example-red-square-grunge-stamp-260nw-327662909.jpg" alt="Home" />

最终结果将是 800px，因为 min-width 是最后一次迭代并且将始终获胜。

同样的逻辑发生在 height/min-height/max-height：In CSS,does min-height always have priority over max-height in all browsers?

css-selectorscss-specificityhtmlwidth