Question

此刻我正在工作的网站上遇到CSS规则方面的问题。

它使用基于WPBakery Visual Builder的自定义主题。问题是，我需要编辑元素的背景色。我都尝试过：

在WPBakery中编辑行背景色。问题是它可以在编辑面板中正确显示，但不能在实际网站上显示。
为该元素添加自定义CSS规则。

问题是，样式表可能会覆盖我设置的规则。解释屏幕截图：

有解决这个问题的想法吗？

Answer 1

为您的元素添加更多特异性，例如：

div{
width:100px;
height:100px;
}

div.test{
  background:blue !important;
}

.test{
  background:red !important;
}

<div class="test"></div>

在选择器中没有div部分的情况下，正方形将采用最后一个css规则并应用它，因为它们的特异性与您的情况相同。

Answer 2

不幸的是，使用!important，请避免这样做。但是，请尝试更具体一些，例如：.parent-div .your-class {color：pink} ...并且可能还必须添加!important;但我建议您至少在遇到问题的地方编辑主题并删除!important。导入styles.css的重要顺序也很重要，添加一个自定义文件并将其放在最后，例如：

<head>
<link rel="theme.css" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器将接受最后一个声明。

CSS规则会覆盖背景色的自定义规则

2 个答案: