同一样式表下mediaZoom按钮在新页面无法加载对应样式的问题求助

核心问题定位 #

兄弟，我扫了一遍你的代码片段，立刻就找到问题了——CSS类名和HTML里的类名大小写不匹配！

你仔细对比下：

• 你的CSS样式里写的选择器是：.mediazoom（注意最后一个字母是小写的z）
• 但HTML中给缩放按钮定义的类名是：mediaZoom（最后一个字母是大写的Z）

现代浏览器在标准HTML模式下，CSS类名是严格区分大小写的！这就导致浏览器找不到能匹配mediaZoom的CSS规则，自然不会给这个按钮应用你写的绝对定位、颜色等样式。而它能继承.sourceItemContainer的样式，是因为作为子元素本身就会继承父容器的可继承属性（比如cursor），这和你描述的排查现象完全对应。

其他可能性排除 #

你担心的样式表加载顺序、新样式表覆盖的问题可以直接排除：

• 你说new-css.css里没有mediaZoom相关声明，旧样式表又是第一个导入的，不存在被覆盖的情况
• 其他元素（比如.sourceItemContainer）样式正常，说明旧样式表确实已经成功加载了

修复方案 #

只需要把CSS和HTML的类名大小写统一即可，二选一：

• 方案1：修改CSS文件中的选择器，把.mediazoom改成.mediaZoom
• 方案2：修改HTML里的类名，把mediaZoom改成mediazoom

改完刷新页面，你的缩放按钮就能正常应用样式啦！

内容来源于stack exchange