在Wordpress编辑器中添加HTML和CSS？

Question

我用的是一个儿童主题“自由”。(https://en-gb.wordpress.org/themes/freestore/)

我试图使用简单的HTML和CSS向我的页面添加一些内容。我已经成功地通过style.css更改了主题中的CSS样式，但是我尝试添加自己的HTML，然后添加CSS来对其进行样式化。

我已经创建了网页‘主页’，通过wordpress的文本编辑器，我可以添加我的HTML罚款。当我试图通过我的style.css添加CSS时，它不应用样式。不过，我可以内联地添加样式，但我想将样式添加到外部。

示例：

在wordpress文本编辑器上，我会添加一行：

<div id="cssTest">TEXT</div>

在我的style.css文件中，我要添加：

#cssTest {
    background-color: red;
}

不应用CSS样式。但是，将以下内容添加到HTML编辑器中会很好：

<div id="cssTest" style="background-color: red;">TEXT</div>

我的问题是：

1. 如何通过外部样式表应用我的样式？
2. 我应该为该页面创建自己的模板并在那里添加HTML吗？

Answer 1

检查子主题style.css是否有Text Domain: freestore-child父名-子主题。您添加的任何css id/class元素都将被实现。

最好的方法是创建custom.css文件，并通过wp_enqueue_style函数在子主题的functions.php中对其进行修改。

我相信最好的做法是为主页这样的特定页面创建页面模板。

Answer 2

最有可能的是，CSS规则属于您的原始主题，它比您试图应用的规则更“特定”。要检查这一点，请使用浏览器工具检查元素，并查看应用于该元素的CSS规则。

例如，如果这个规则是

.content main .section_1 .gxt1 {
  background-color: black;
}

，您将不得不覆盖它，添加一个具有更高细节的规则，例如

.content main .section_1 .gxt1 #cssTest {
  background-color: red;
}

如果原始规则包含!important，则还必须添加!important。所以要覆盖

.content main .section_1 .gxt1 {
  background-color: black !important;
}

，你需要这样的东西

.content main .section_1 .gxt1 #cssTest {
  background-color: red !important;
}