WordPress子主题/自定义CSS无法覆盖父主题@media查询问题求助

步骤1：确认自定义CSS加载顺序 #

• WordPress后台自带的「自定义CSS」功能默认优先级最高，会在所有主题CSS之后加载，优先用这个入口修改。
• 如果用子主题CSS，需要确保子主题样式表正确入队，在子主题的functions.php中添加以下代码，保证子主题CSS晚于父主题CSS加载：

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles', 999 );
function child_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-theme-style-handle' ), wp_get_theme()->get('Version'), 'all' );
}

把代码里的parent-theme-style-handle替换成你父主题样式表的注册句柄，不知道的话可以通过浏览器开发者工具查看父主题CSS的link标签id，去掉末尾的-css就是句柄。

步骤2：编写覆盖规则 #

你的需求是让1081px ~ 1280px区间不触发父主题的适配规则，回到桌面端默认布局，只保留<=1080px时的适配效果。你需要先在浏览器开发者工具中查看屏幕宽度大于1280px时，content-area、sidebar-primary、sidebar-secondary等元素的原有样式，然后添加以下CSS：

/* 仅针对1081px-1280px区间，覆盖父主题的1280px适配规则 */
@media only screen and (min-width: 1081px) and (max-width: 1280px) {
  /* 选择器前加html前缀提升权重，所有属性加!important覆盖原有规则 */
  html .content-both-sidebars .content-area {
    float: left !important; /* 替换成你桌面端的实际float值 */
    width: 70% !important; /* 替换成你桌面端的实际宽度值 */
    left: 0 !important; /* 替换成你桌面端的实际left值 */
    border-width: 1px !important; /* 替换成你桌面端的实际边框值 */
  }
  html .content-both-sidebars:not(.separate-layout) .content-area {
    padding: 0 30px !important; /* 替换成你桌面端的实际padding值 */
    margin-bottom: 0 !important; /* 替换成你桌面端的实际margin值 */
  }
  html .content-both-sidebars .widget-area.sidebar-primary,
  html .content-both-sidebars .widget-area.sidebar-secondary {
    float: left !important; /* 替换成你桌面端的实际float值 */
    width: 15% !important; /* 替换成你桌面端的实际侧边栏宽度 */
    left: 0 !important; /* 替换成你桌面端的实际left值 */
    padding: 0 15px !important; /* 替换成你桌面端的实际padding值 */
  }
  html .content-both-sidebars .widget-area.sidebar-primary {
    float: right !important; /* 替换成你桌面端的实际float值 */
  }
  html .content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,
  html .content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary {
    width: 14% !important; /* 替换成你桌面端的实际宽度值 */
  }
  html .separate-layout.content-both-sidebars .content-area {
    margin-bottom: 0 !important; /* 替换成你桌面端的实际margin值 */
  }
  html .separate-layout.content-both-sidebars .widget-area.sidebar-primary,
  html .separate-layout.content-both-sidebars .widget-area.sidebar-secondary {
    width: 15% !important; /* 替换成你桌面端的实际宽度值 */
  }
  html .separate-layout.content-both-sidebars .widget-area.sidebar-secondary {
    margin-bottom: 0 !important; /* 替换成你桌面端的实际margin值 */
  }
  html .separate-layout.content-both-sidebars .widget-area.sidebar-primary {
    padding-left: 15px !important; /* 替换成你桌面端的实际padding值 */
  }
}

步骤3：验证生效 #

修改完成后清空WordPress站点缓存、浏览器缓存，用快捷键Ctrl+F5强制刷新页面，调整浏览器窗口宽度到1081px~1280px区间查看效果即可。

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