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

Question

我使用的是“freestore”的儿童主题。 （https://en-gb.wordpress.org/themes/freestore/）

我正在尝试使用简单的HTML和CSS向我的某个页面添加一些内容。 我已成功通过style.css在主题中成功更改CSS样式，但是我正在尝试添加自己的HTML，然后使用CSS来设置样式。

我创建了“home”页面，通过wordpress tinymce文本编辑器，我可以添加我的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 parentthemename-child。您添加的任何css id / class元素都将被实现。

最好的方法是创建custom.css文件，并通过wp_enqueue_style函数将其添加到子主题的functions.php中。

我认为为家庭等特定网页创建页面模板是最佳做法。

Answer 2

最有可能存在属于您原始主题的CSS规则，该规则更具有特定性[＆34;而不是你想要申请的规则。要检查这一点，请使用浏览器工具检查元素，并查看应用于该元素的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;
}