是否可以选择所有具有属性值大于某个数字的元素？

Question

我想知道以下内容是否可以用CSS实现：

HTML代码：

<span class="funny-elem" data-mystate="127">Hello World</span>
<span class="funny-elem" data-mystate="69">Hello Bird</span>
<span class="funny-elem" data-mystate="1337">Hello Nerd</span>
<span class="funny-elem" data-mystate="14">Hello What</span>
<span class="funny-elem" data-mystate="0">Hello Else</span>
...

CSS代码：

.funny-elem[data-mystate=">50"] {
    color:#0f0;
}

.funny-elem[data-mystate="<50"] {
    color:#f00;
}

当然，上述CSS代码不起作用，因为“大于”和“小于”符号在此处被解释为属性值。

但是，您知道一种选择所有具有数字属性值大于或小于某个数字的元素的方法吗？

- Blackbam

---

在纯CSS中，没有办法做到那样。 - j08691

至少没有简单的方法，但也许有人有想法？ - Blackbam

这可能会有所帮助：https://dev59.com/TWw05IYBdhLWcg3wsz0l - apaul

使用JavaScript很容易，但最好避免使用它。 - Blackbam

Answer 1

不，纯CSS无法实现。

可能的属性选择器包括：

• [att]
  
• [att=val]
  
• [att~=val]
  
• [att|=val]
  

W3关于属性选择器的文档 补充说:

属性值必须是 CSS 标识符或字符串 [CSS21] 选择器中属性名称和值的大小写取决于文档语言。

因此，它们不是数值。没有任何方式可以使用任何数字比较。

- LcSalazar

---

我刚才看到的可能的黑客攻击是：[att^=val] 具体来说是 [data-mystate^="1"] 选择所有以1开头的状态。然而，这并没有真正解决问题，为什么他们没有制作一个像 [attr>=val] 这样的选择器呢？ - Blackbam

因为CSS需要知道val是一个数字，但是CSS并不将它们视为数字（至少目前还没有）:) - LcSalazar

我认为他们至少应该实现一些字符串比较的可能性（大于）。不过看起来我必须接受当前没有办法的事实 O:-)不过我想到了一个邪恶的方法——你可以将数字以一进制输出，然后使用[data-mystate^="11111"]等等 :-D - Blackbam

@Blackbam - 什么生成了这个 data-mystate 值？ - LcSalazar

这是由PHP输出的数据库数字。然而，我知道更改HTML将更改实际问题，因此您的答案是正确的。我只是等待一天，看看是否有人提出另一个想法。 - Blackbam

我建议您在PHP中实现逻辑。检查数据状态是否小于50，然后将特定类设置为span。 - LcSalazar

Answer 2

根据阈值的大小和您希望CSS的整洁程度，您可以使用`:not()`和`:is()`来实现这种效果，类似以下方式：

span[data-mystate]:not(:is(
[data-mystate="1"],
[data-mystate="2"],
[data-mystate="3"]
/*, ... */)) {
    color:#0f0;
}

我实际上在我的Downstyler项目中使用了这个技巧，以便为具有大于1的`size`属性的``元素使用自定义样式。

- waldyrious

---

不知道:is选择器，很有趣。当然，使用SASS也可以很容易地在这里创建一个循环。但我仍然希望CSS能够支持根据数据属性通配符或比较运算符进行选择的功能。 - undefined

Answer 3

基本的CSS3不支持逻辑--它只是严格的样式。

你可以通过使用Javascript来执行逻辑，并在语句为真时向你的元素添加一个类，或者使用CSS的预处理器，比如LESS或SASS。

这里是如何使用纯Javascript和类来实现它：

<script type="text/javascript">
  var x = document.getElementsByClassName("funny-elem")
  var i;

  for (i = 0; i < x.length; i++) {
    var comparator = x[i].getAttribute("data-mystate");
    if (comparator > 50){
      x[i].setAttribute("class","funny-elem over50");
    }
    if (comparator < 50){
      x[i].setAttribute("class","funny-elem under50");
    }
  }
</script>

<style>
  .funny-elem.over50{ color:#0f0;}
  .funny-elem.under50{ color:#f00;}
</style>

查看 jsFiddle 示例

- CreMedian