Wordpress - 父主题覆盖子样式答案

【问题标题】：Wordpress - Parent theme overriding Child stylingWordpress - 父主题覆盖子样式
【发布时间】：2017-07-19 12:53:34
【问题描述】：

我第一次使用 html5blank 主题作为父主题在 Wordpress 上构建网站。我在子主题中的大多数样式规则都按应有的方式工作，但有一些没有，我无法弄清楚为什么会这样。我已经预先构建了前端，所以我知道代码可以在浏览器中运行。对于前端，我在网格中使用了 reset.css 和 skeleton.css。由于父主题使用 normalize.css，因此我没有传输重置文件。我的骨架网格需要一个独立的文件还是可以全部放入 style.css 中（这就是我所做的）？

例如，主页顶部应该是这样的 -

这就是它在 Wordpress 中的外观 -

为什么某些样式适用而其他样式不适用？除了 style.css 和 functions.php 之外，还有其他父主题文件会影响我需要在子项中重新创建以覆盖它的样式规则吗？感谢任何帮助。

更新

在开发者工具中查看这些样式被父级覆盖（它们在开发者工具中被删除）

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.showreel {
  height: 50px;
  max-width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div.seemore {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
.showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

【问题讨论】：

您是否尝试在您不想被覆盖的样式上使用!important？
@JavaEvgen 这是否适用于所有样式规则？此外，必须有一种方法可以覆盖所有内容。我认为子主题会自动执行此操作。
是的。试试看。

标签： php css wordpress

【解决方案1】：

你的问题很宽泛，如果没有一个可验证的例子摆在我面前，很难给出方向。

很遗憾，由于您问题的性质，我不确定您是否能够给我一个可验证的示例，因此我将继续指出最明显的解决方案。

通常，在这种情况下，问题出在 CSS 规则中的特殊性。

你的父 CSS 文件可能会启动这样的规则：

.menu > ul > li a { /* four selectors */
    color: #00ff00;
}

您的子主题样式表中有一条规则，如下所示：

.menu li a { /* three selectors */
    color: red;
}

在这种情况下，您的父样式表规则将覆盖您的子样式表规则。

检查这一点的最简单方法是检查浏览器中的元素，看看有多少规则应用于您的元素。通常，当从另一个地方覆盖特定规则时，它会在您的元素检查器中具有删除线样式。

您可以通过以下任一方式解决此问题：

更具体地说明您的财产声明，或者
在 CSS 中使用 !important 标签

【讨论】：

谢谢，我已经用开发者工具上的代码更新了我的答案。
感谢@Mike.Whitehead - 所以它正在被覆盖。如果您遵循我关于特异性的观点（如果您有时间的话，请查看它链接到的文档）您会注意到，如果您增加选择器，您应该覆盖父样式。即，如果优先的样式在其声明中有 5 个选择器 - 请确保在您的声明中至少使用 6 个。
请记住，如果优先于您自己的规则使用!important 标记，那么您必须执行相同操作才能覆盖它。
那么在 !important 的具体情况下是无关紧要的吗？我不能只将 .showreel 更改为 section#home .showreel 吗？
@Mike.Whitehead - 是的，这是正确的。但是，更具体的!important 规则将覆盖不太具体的!important 规则，因此在大多数情况下，特异性仍然很重要。从最不重要到最重要总是这样：不太具体 更具体不太具体！重要更具体！重要

【解决方案2】：

由于我看不到该网站，因此很难准确判断出了什么问题。但会不会是父主题中的某些样式有 !important ？

!important 将覆盖您的 CSS，即使您的 CSS 是在父主题之后加载的。

如果问题是父主题中的 !important ，这是一个很好的答案： https://stackoverflow.com/a/11178731/5611476

【讨论】：