CSS 选择器按颜色而不考虑表示答案

【问题标题】：CSS selector by color regardless of representationCSS 选择器按颜色而不考虑表示
【发布时间】：2017-06-11 14:50:51
【问题描述】：

我想用某种颜色选择页面上的所有元素，比如说红色。我知道我可以这样做：$("div[style=color:rgb(255,0,0)]")。但是，我的问题是红色有不同的表示形式，例如#FF0000 和简单的 red。但rgb(255, 0, 0) 中的任意数量的空白仍然定义红色。

我需要以适用于任何颜色并接受该颜色的任何表示的通用方式进行操作。有没有办法定义这样一个“智能”的 CSS 选择器？

【问题讨论】：

getComputedStyle 返回解析的 rgba 颜色
我可以在 CSS 选择器中使用它吗？它是更大的选择过滤器的一部分...
您不能在标准的 CSS 选择器中使用它，但由于您使用的是 jQuery，您可以编写一个使用 getComputedStyle 的自定义选择器。
尝试将 css 选择器定义为正则表达式字符串。我不擅长正则表达式，但它可以以regex = "style=color:" 之类的开头，但至于冒号之后的内容取决于您要选择的内容。如果您想选择所有可能的格式，我仍然会说可能的格式数量有限，因此列出一个简短的列表不会太难。
getComputedStyle 不适合选择器，但是，除了dina 的想法之外，您可以将解析后的值设置到.style。再次，将所有颜色均质化，以便 CSS 查询可以工作。

标签： javascript jquery html css

【解决方案1】：

我不确定我是否理解问题所在。您只想在颜色为“红色”（字面意思是#FF00000）时过滤？或者你的过滤器中也会包含某种例如“darkred”？

在第一种情况下，我真的看不出有什么问题，kukkuz 的解决方案可以进行一些改进。

据我所知，CSS 选择器无法做到这一点

【讨论】：

我不在乎颜色的色调。我可以假设它是准确的。我需要的是对表示不可知 - 有一个在语义级别上工作的选择器，而不仅仅是比较字符串。 “颜色”也只是一个例子。它也可以是背景颜色或任何其他颜色属性。
“我需要的是与表示无关 - 有一个在语义级别上工作的选择器” - 哈哈，你很有趣。颜色是表示。如果您想要语义，那么您首先不会尝试选择“按颜色”，但它会反过来：元素只有因为的 有特定的颜色>语义分类，不是因为它是通过样式属性随机分配的。然后根据语义选择正确的元素也没有问题。
@CBroe representing 并不意味着presenting 两次（甚至不是一次），它意味着一种通过某些字符或术语表达概念的方式。 dictionary.com/browse/represent。而semantics 是术语或字符的含义（每个表示背后的概念）。 dictionary.com/browse/semantics。所以迪娜的话其实很有道理。检测red color而不考虑表示它的各种方式是在语义级别上进行的。
@Marc 这不是我的意思。如果您有一个强调语义的代码库，则不会通过在元素上放置样式属性来任意应用颜色 - 而是通过样式表中的 CSS 选择器。然后可以使用这些相同的选择器来选择相关元素，而不是尝试匹配实际的颜色值。
@CBroe 是的，但这是您的观点，而不是这里的问题。如果您无法控制页面的构建方式怎么办？问题是如何在color attribute 中选择所有具有red 颜色（它的任何表示）的对象。其他任何事情都不能回答这个问题。嘲笑 OP 最终不回答问题只是欺凌。

【解决方案2】：

通过使用这种类型的选择器，您告诉 jquery 搜索包含您要查找的单词的字符串/子字符串。但是选择是无穷无尽的。

因为您正在搜索字符串，所以您必须考虑所有可能性，包括空格、不同的字符大小、除颜色之外的更多样式属性，这些属性可以包含 0 或 255 或 ff 或 00 等数字......

这在当前选择器的支持下是不可能的...

但是如果你将使用 jquery 来获取所有元素，然后检查它们的颜色/背景颜色，你将得到一个真实的颜色表示。

不管样式是怎么写的，浏览器都会返回一个颜色（它可以是十六进制或RGB，取决于浏览器）。

我认为这种行为源于 w3c 规则...

一个非优雅的灵魂应该是这样的：

$('div').each(function(){
if($(this).css('color') == "rgb(255, 0, 0)" || $(this).css('color') == "#FF0000"){
    $(this).css("color","green");
}
if($(this).css('background-color') == "rgb(255, 0, 0)" || $(this).css('background-color') == "rgba(255, 0, 0, 0)"){
    $(this).css("background-color","green");
}});

小提琴：https://jsfiddle.net/zdu1adr7/4/

这个适用于 chrome、firefox、edge，即 11/10/9。

【讨论】：