Question

假设我有td，就像这样：

<td class="nice-text">Cell Text</td>

无论td的背景如何，我都希望确保我的文字可见。如果我们假设背景颜色存储在data-background内，如下所示：

<td class="nice-text" data-background="#000000"></td>

我们在CSS中添加以下规则：

.nice-text[data-background=\\#000000] {
    color: white;
}

如果选择color，则white将为#000000。但是#000000附近有很多颜色。因为为所有这些颜色编写CSS规则显然是不可行的，只有在绝望的情况下才会使用Javascript，是否有可能使用选择器来定义一组接近黑色的color s并为他们设置color: white;？

Answer 1

是否有可能使用选择器来定义一组接近黑色的颜色

没有。选择者没有任何颜色知识。

您将不得不编写自己的算法，以根据背景颜色确定前景色是亮还是暗。如果你想要完成任务，那就意味着JavaScript。如果您正在尝试为了实验而开发一个仅用于CSS的概念验证，那么您可以尝试模拟正则表达式（假设它们，正如您所说的那样，可以使用选择器实现）并查看是否你最终得到的东西类似于an actual color-matching algorithm，并产生准确一致的结果。如果您确实提出了一个实际可行的解决方案，而不是通过将属性值更改为使其像编写非算法选择器一样简单而作弊，请随时通过案例研究发布答案。

我的观点是，选择器不会为您的特定用例提供设计的功能，无论何时可能用于开发基本上是黑客攻击的功能可能最好花在实际上，实用的解决方案。

如果没有备份信息，我倾向于不相信评论。

看，我可以将您链接到spec，但我无法将您链接到规范的任何特定部分，因为规范未在任何地方提及此类功能，因为工作组从未考虑过首先考虑使用此类功能的唯一原因。无论您是否愿意接受这一事实，都取决于您。我和规范的作者以及在布局引擎上工作的人或工作组中的任何其他人都没有义务向你或其他任何人证明不存在的特征是否可行规范，实施，测试和发货。

当然，如果你想变得非常迂腐，那么技术上没有什么可以阻止工作组提出一个功能性的伪类，它接受一个代表颜色作为参数的字符串并根据你的标准匹配元素已在上面列出。实际上，您可以自己实现选择器（或者采用现成的非标准实现，例如Sizzle），如果您愿意，可以实现这样的功能。但是，如果您真的希望得到专家的明智意见，那么非常不可能这样的功能对于足够广泛的受众群体有用，可以保证部分浏览器供应商的所有开发时间和工作量。工作组。

Answer 2

这是可能的，但不是纯CSS。如果您可以引入一些JavaScript，此解决方案可能适合您。它并不完美，但它非常好。基本上，此函数将评估您传递的十六进制颜色，并根据十六进制返回“黑色”或“白色”。

在JavaScript中：

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

我在这里有一个有效的例子 https://jsfiddle.net/nzcyjhz3/2/

如何分组CSS颜色

2 个答案: