css - Wordpress 无法覆盖 CSS 中的 @media 查询

Question

我尝试使用子 css覆盖 @media 查询并从 wp interface 自定义 css 函数。

我附在我在父 css 文件中找到的代码下方。

@media only screen and (max-width: 1280px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

@media only screen and (max-width: 1080px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; left:auto !important; padding:0 !important}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% !important}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

我需要做的是覆盖第一个，即（最大宽度：1280px），让第二个只工作。我能够做到这一点，删除父 css 中的代码行，但我无法在子主题或 wp 界面中的 css 自定义上做同样的事情。

有人可以帮忙吗？

标签： csswordpress

Answer 1

试试这个

@media all and (max-width: 1280px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; 左：自动！重要；填充：0！重要}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% ！重要的}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}

@media all and (max-width: 1080px){
.content-both-sidebars .content-area{float:none !important;width:100% !important;left:auto !important;border-width:0 !important}
.content-both-sidebars:not(.separate-layout) .content-area{padding:0 !important;margin-bottom:40px}
.content-both-sidebars .widget-area.sidebar-primary,.content-both-sidebars .widget-area.sidebar-secondary{float:left;width:49% !important; 左：自动！重要；填充：0！重要}
.content-both-sidebars .widget-area.sidebar-primary{float:right}
.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-primary,.content-both-sidebars:not(.separate-layout) .widget-area.sidebar-secondary{width:48% ！重要的}
.separate-layout.content-both-sidebars .content-area{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary,.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{width:49% !important}
.separate-layout.content-both-sidebars .widget-area.sidebar-secondary{margin-bottom:20px}
.separate-layout.content-both-sidebars .widget-area.sidebar-primary{padding-left:0}
}