WordPress WooCommerce CSS修改element.style的max-width失效怎么办

[attr^=val] 是CSS属性前缀选择器，仅匹配属性值以指定字符串开头的元素。
之前修改position属性能生效，是因为目标img的style属性值第一个声明就是position: absolute，刚好位于style字符串起始位置，符合前缀匹配规则。
而max-width: none在该元素style属性值的靠后位置，前面依次排列了position、top、left、opacity、width、height、border等多个声明，不满足前缀匹配要求，选择器无法命中目标元素，样式自然不生效。

按稳定性从高到低排序，可按需选择：

• 直接匹配元素固定类名：目标图片是WooCommerce产品放大镜组件的元素，自带固定类zoomImg，该选择器不受内联样式顺序、样式写法变动影响，是最稳妥的方案：

.zoomImg {
    max-width: 1200px !important;
}

• 若必须通过style属性特征匹配，将前缀匹配符^=替换为包含匹配符*=，该选择器可匹配属性值任意位置包含指定字符串的元素，无论目标内容在style属性的开头、中间还是结尾都能命中：

div [style*="max-width: none"]{
    max-width: 1200px !important;
}

注意：这类基于style字符串的匹配写法容错率极低，只要内联样式里冒号后空格增减、属性值写法微调（比如写成max-width:none去掉冒号后空格）就会匹配失效，非必要不优先使用。

• 若需要进一步提升匹配精准度，可组合类选择器与属性选择器，避免误选页面内其他符合style特征的元素：

img.zoomImg[style*="max-width: none"] {
    max-width: 1200px !important;
}

样式添加完成后，记得清空WordPress缓存插件、服务器侧缓存以及浏览器本地缓存再刷新验证，避免旧缓存导致新样式不加载。

内容的提问来源于stack exchange，提问作者Mr Cogumelo