选择具有特定颜色的所有元素？

编程问答 2022-06-12

问题描述

是否有一个选择器可以选择具有特定颜色的所有元素？我想将所有带有color: #1a0dab的文本更改为color:00b0f4。

解决方法

Javascript / jQuery中没有此类选择器。也许您可以： 1-更新CSS文件并查找/替换所有实例 2-向所有必需的元素添加一个类，然后使用该类来定位它们。

,

如果样式是内联定义的，则可以执行以下操作：

[style*="#1a0dab"] {
    color: #00b0f4 !important;
}

演示：

[style*="#1a0dab"] {
    color: #00b0f4 !important;
}
<p style="color: #1a0dab">paragraph 1</p>

<p>paragraph 2</p>

<p style="color: #1a0dab">paragraph 3</p>

如果原始样式不是内联定义的，则没有纯CSS方法可以实现。

如果您可以访问JavaScript，则可以执行以下操作，但是如果页面中包含很多元素或需要经常运行该功能，则性能可能会很差：

[...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26,13,171)')

请注意，您需要使用RGB表示形式（而不是十六进制版本）来检查相等性。

这是后一种方法的演示：

[...document.querySelectorAll('*')]
    .filter(el => getComputedStyle(el).color === 'rgb(26,171)')
    .forEach(el => el.style.color = '#00b0f4')
.has-color {
    color: #1a0dab;
}
<p class="has-color">paragraph 1</p>

<p>paragraph 2</p>

<p class="has-color">paragraph 3</p>

,

您应该列出所有需要更改颜色的标签的列表，然后使用jquery给出唯一的颜色更改顺序

userstyles