CSS 似乎可以使用谷歌检查

Question

你好堆栈溢出，

我正在尝试更改页面上文本“aanbieding”的颜色：https://petgeek.nl/product/playbone/

通常当我想这样做时，我只是检查该项目，找到代码更改它并复制粘贴。但它不再起作用了吗？在其他网站上是这样，但不知怎的，它在这个网站上不起作用。

谷歌给出的代码是：

element.style {
}
.content-area .summary .onsale {
    position: relative;
    margin: 0 0 2px 2px;
    padding: 0;
    color: #3bb54a;
    background: 0 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    z-index: 1;
}

我尝试使用它与元素样式和不使用它。但我做什么并不重要，elementor 将代码显示为红色（未知？）我已经工作和搜索了几个小时，但我没有得到任何进一步的信息...希望这里的任何人都可以帮助我。

（网站上很多代码都是这样，大概只有5%是这样的）

我尝试按照我在之前的帖子中所说的那样更改它，但没有成功。

Answer 1

请尝试以下语法：

.content-area .summary .onsale {
  color: red;
}

您可以在这里获得您想要的颜色。

Answer 2

您所描述的问题的一个可能原因可能是原始CSS规则（显然属于名为“shoptimizer”的主题）比您添加的CSS晚加载，因此会覆盖它。 为了避免这种情况，您可以为添加的 CSS 规则使用更

特定

的选择器，如下所示：

.content-area .summary span.onsale {
  color: red; /* any color you want */
}

请注意，我添加了 

span

，因为

.onsale

类应用于该页面上的

span

，这使其比以前具有更高的特异性，因此可能会推翻原始 CSS 规则，即使该规则是在您的 CSS 规则之后加载的。规则。