如何添加这种怪异的CSS样式

Question

我试图在我的wordpress网站上添加一些CSS样式。 但是，我很困惑如何选择元素并添加CSS！ 让我在三种情况下详细解释一下：图1：

我将在其中更改文本的“提交出席”按钮的颜色和宽度。 我想把它变成红色。

首先尝试：图片2：

我选择了calss：

wpcf7-form-control wpcf7-submit

添加了背景色：红色，但是没有用。

第二次尝试：图片3：

我在这堂课上做了同样的事情：

wpcf7-form-control

尝试尝试：Pictur 4：

在嵌入式样式中，当我添加背景颜色：红色和宽度：100％工作时。 我注意到还添加了样式属性。 但是，我不确定如何在wordpress的自定义CSS中添加。 我的意思是应该选择哪个元素？ 当然，内联样式不是元素。

Answer 1

对于WordPress，这不是问题。 这是由于CSS特殊性。 这意味着更具体的规则将“获胜”并被应用。 这就是为什么内联样式通常可以在非内联样式上工作的原因。

在您的示例中，正在应用的规则比您尝试覆盖的规则更具体。

在具体性和规则应用顺序方面存在层次结构。 在这里，它们是按最具体的顺序排列的：

1. 内联样式
2. ID-定位元素ID比定位类更具体
3. 类，属性和伪类（例如：hover）
4. 元素（例如“ p”标签）和伪元素（：before）

为您的按钮添加ID或以更特定的方式定位类。 例如body .thecontainer .thediv .anothercontainer .myelement

Answer 2

这可能是可行的。 您需要添加！important属性。 wpcf7-form-control {background-color：red！important; } 尝试这个。

Answer 3

要更新Worpress CSS，您必须编辑文件style.css

外观->编辑器-> style.css（在其他文件中搜索）

要么

外观->自定义->其他CSS（您必须在其中手动添加每行代码）

有时您需要添加“！important;” 在行尾，类似：

背景颜色：红色！重要；