Question

我正在使用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;
}

Answer 1

你的问题非常广泛，如果没有在我面前有可证实的例子，很难给出指示。

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

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

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

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

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

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

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

检查此问题的最简单方法是检查浏览器中的元素，并查看适用于元素的规则数量。通常，当从另一个地方覆盖特定规则时，它将在元素检查器中具有删除线样式。

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

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

Answer 2

由于我看不到网站，因此很难确切地说出错误。但是，父主题中的某些样式是否具有重要性？

！important会覆盖你的CSS甚至是你的CSS是在父主题之后加载的。

如果问题是来自父主题的！important，那么这是一个很好的答案： https://stackoverflow.com/a/11178731/5611476

Wordpress - 父主题覆盖儿童样式

2 个答案: