css - Wordpress - 媒体查询在 CSS 中未被识别

Question

我正在使用(二十四岁的)子主题并试图删除特定元素的填充。有问题的代码出现在父 style.css 中:

@media screen and (min-width: 846px) {
.内容区，
.content-sidebar {
填充顶部:72px；
}
}


这样修改padding为0px时:

@media screen and (min-width: 846px) {
.内容区，
.content-sidebar {
填充顶部:0px；
}
}
并在 PARENT style.css 的末尾插入，我实现了我想要的结果(填充更改为 0px)。但是，当我在 CHILD style.css 的末尾插入相同的代码时，它什么也不做(填充保持在 72px)。有人知道为什么会这样吗？

Answer 1

CSS 规则按顺序解析，最后的规则优先于开头的规则。换句话说，如果同一个选择器出现两次(即使在不同的文件中)，第二个副本将覆盖第一个。如果您的自定义 CSS 在主题的 CSS 之前加载，则主题 CSS 将优先。如果您使用检查器(Chrome 中的 F12)查看浏览器实际引用的选择器副本，您可以看到这种情况。

CSS 也更注重特异性而非顺序，因此您也可以尝试让您的选择器比主题的更具体。例如，假设 .content-area 和 .content-sidebar 位于名为 .content-wrapper 的包装器中。如果你这样做，它会覆盖原来的选择器:

.content-wrapper .content-area, 
.content-wrapper .content-sidebar {
  padding-top: 0px;
}