时间戳

首页 > 解决方案 > 如果正文/背景颜色为白色，则更改链接颜色

javascript - 如果正文/背景颜色为白色，则更改链接颜色

问题描述

我们网站上具有“elementor-text-editor”类的元素中的链接使用以下颜色规则进行样式设置：

.elementor-text-editor a {
    color: #e9741f;
}

如果链接出现在白色背景上，我们如何自动将链接颜色更改为#ffd329？（如果链接出现在元素中，例如 div，颜色不是#fff，我们不希望链接颜色改变）

标签： javascriptcss

解决方案

在 CSS 中，使用Child Combinator ( >) 选择器根据 URL 所在的容器对 URL 进行不同的着色。因此，例如，您将有一个#white-background和#blue-background div's，每个都有不同的颜色。然后你就可以只影响一个背景...

#blue-background > .elementor-text-editor { ... }

中发生的事情...只会影响带有蓝色背景的链接。演示...

.elementor-text-editor {
    color: #e9741f
}

#blue-background > .elementor-text-editor {
    color: #FFFFFF;
}

#white-background {
  background-color:white;
}

#blue-background {
  background-color:blue;
}
<div id="white-background">
<a class="elementor-text-editor" href="wikipedia.org">link1</a>
</div>

<div id="blue-background">
<a class="elementor-text-editor" href="wikipedia.org">link2</a>
</div>

免责声明：这仅适用于static定位元素。如果你有absolute元素，或者任何类似的东西，你需要考虑另一种方法。不过，我没有看到足够的细节来提供进一步的建议。

推荐阅读