无法对页面元素生效CSS修改，是否是选择器引用错误？

存在的问题 #

• CSS选择器匹配逻辑错误：你写的.A.B格式选择器，匹配的是同一个元素同时拥有A和B两个类的场景，你的代码中desktop-mg-rls是外层div的类，compare是内部img的类，属于父子元素关系，原有选择器没有命中任何元素，所有显隐规则都未生效，导致两张图片始终同时显示。
• 拼写错误：移动端规则中你将compare错写为comapre，即使选择器逻辑正确，这条规则也不会生效。

修复后的CSS代码 #

直接控制外层容器的显隐即可，不需要关联内部img的类，替换原有CSS即可：

/* 桌面端默认逻辑：显示桌面版，隐藏移动端版 */
.desktop-mg-rls {
  display: block;
}
.mobile-mg-rls {
  display: none;
}

/* 移动端阈值适配：隐藏桌面版，显示移动端版 */
@media (max-width: 767px) {
  .desktop-mg-rls {
    display: none;
  }
  .mobile-mg-rls {
    display: block;
  }
}

可选优化：你也可以直接用HTML原生<picture>标签实现响应式图片，无需额外写CSS，替换原来两个图片容器的代码即可：

<picture>
  <!-- 移动端适配图 -->
  <source media="(max-width: 767px)" srcset="https://cdn.shopify.com/s/files/1/1173/4268/files/OB_MG_Mobile_RLS_Chart.jpg?v=1624034078">
  <!-- 桌面端默认图 -->
  <img src="https://cdn.shopify.com/s/files/1/1173/4268/files/OB-MG--Chart-2.jpg?v=1624026013" class="compare" alt="A vs B对比图">
</picture>

内容的提问来源于stack exchange，提问作者Chase Bemis