Question

我正在使用一个子主题（二十四个）并且我正在尝试删除特定元素的填充。有问题的代码在父style.css：

中显示

@media screen and (min-width: 846px) { .content-area, .content-sidebar { padding-top: 72px; } }

当将填充修改为0px时：

@media screen and (min-width: 846px) { .content-area, .content-sidebar { padding-top: 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;
}

Wordpress - CSS中无法识别媒体查询

1 个答案: