桌面端与移动端背景图切换问题：CSS媒体查询设置未生效

看起来你的核心问题是CSS选择器权重不够，导致移动端的样式被桌面端的高权重样式覆盖了，我来帮你一步步解决：

问题分析 #

你桌面端用的选择器是 div.et_pb_section.et_pb_section_0，这个选择器包含元素标签+两个类，权重比移动端的单一类选择器 .demo-request-backgroundimage 高很多。哪怕两边都加了 !important，桌面端的样式依然会因为选择器更具体而优先生效。

解决方案 #

1. 提升移动端选择器的权重（最关键） #

把移动端的选择器改成和桌面端同级别甚至更具体的写法，确保能覆盖桌面样式：

@media only screen and (max-width: 767px) {
  /* 选择器和桌面端保持一致，再加上额外的类提升权重 */
  div.et_pb_section.et_pb_section_0.demo-request-backgroundimage {
    background-image: url(/wp-content/uploads/2018/05/mobilecontactusheader.jpg) !important;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

2. 检查图片路径有效性 #

虽然桌面端路径正常，但还是要确认移动端图片的路径是否正确：

• 直接在浏览器地址栏输入 /wp-content/uploads/2018/05/mobilecontactusheader.jpg，看能否正常打开图片
• 注意文件名的大小写（部分服务器区分大小写，拼写错误会导致路径失效）

3. 验证媒体查询是否触发 #

可以先给移动端样式加一个显眼的测试样式，确认媒体查询是否生效：

@media only screen and (max-width: 767px) {
  div.et_pb_section.et_pb_section_0.demo-request-backgroundimage {
    background-color: tomato !important; /* 临时测试用 */
    /* 其他样式... */
  }
}

如果在移动端视图下背景变成红色，说明媒体查询正常，问题还是出在背景图本身；如果没变化，可能是媒体查询的断点设置不对（比如你的项目移动端断点不是767px）。

4. 尽量减少!important的使用 #

!important会让样式维护变得困难，建议优化选择器权重后去掉它：

• 桌面端样式去掉 !important：

  div.et_pb_section.et_pb_section_0 { 
    background-image: url(/wp-content/uploads/2018/05/contactusheader-2-min.jpg); 
  }
  

• 移动端用更具体的选择器，自然就能覆盖桌面样式，不需要!important

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