从 chrome 开发工具复制 css 更改的正确方法

Question

这里是新手，我正在向我的 wordpress 主题添加额外的 css，同时使用 chrome 开发工具检查它。 例如，这个元素有以下样式（默认情况下，由我的主题提供）：

.product p.price {
float: left;
margin: 0;

}

我想添加这个：

padding: 10px 0;

现在看起来像这样：

.product p.price {
float: left;
margin: 0;
padding: 10px 0;

}

完成后，我必须将 3 行从开发工具复制到我的主题的附加 css 还是只复制我添加的一行？如果我的附加 css 是这样的，这有关系吗：

.product p.price {
padding: 10px 0;

}

而不是这个：

.product p.price {
float: left;
margin: 0;
padding: 10px 0;

}

向主题添加额外的 css 时是否有正确/错误的方法？

Answer 1

我不熟悉 wordpress 做这些事情的方式，但我怀疑您是否想将 CSS 编辑到您的模板中。模板会随着时间的推移而更新，当您更新它们时，它可能会删除所有旧文件并用新下载的版本替换它们 - 您的所有更改都会被清除。

我想 wordpress 要么为您提供一个单独的位置来覆盖样式，要么允许您手动添加额外的样式表（新空 .css 文本文件）。

---

在任何一种情况下，您只需将更改添加到样式表。

根据您的示例，要添加的正确内容是：

.product p.price {
    padding: 10px 0;
}