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

【问题标题】：Is it possible to select all elements with an attribute value greater than a certain number?是否可以选择属性值大于某个数字的所有元素？
【发布时间】：2015-10-15 08:50:21
【问题描述】：

我想知道 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 代码当然不会起作用，因为“大于”和“小于”符号在这里被解释为属性值。

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

【问题讨论】：

在计划 CSS 中没有，没有办法做到这一点。
至少没有简单的方法，但也许有人有想法？
这可能会有所帮助：stackoverflow.com/questions/7084557/…
使用 Javascript 它的 ez 但是最好避免它。

标签： html css css-selectors

【解决方案1】：

不，纯 CSS 没有办法。

可能的属性选择器有：

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

W3's docs on Attribute Selector 补充道：

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

所以，它们不是数字。无法使用任何数字比较。

【讨论】：

正如我刚刚看到的可能的黑客攻击将是：[att^=val] 具体地 [data-mystate^="1"] 选择以 1 开头的所有状态。但这实际上并没有解决问题，为什么他们没有制作像 [attr>=val] 这样的选择器吗？
因为 CSS 需要知道 val 是一个数字。而且 CSS 不会以数字的形式威胁它们（至少现在）:)
好吧，我认为他们至少可以实现一些字符串比较的可能性（大于）。但是看起来我必须接受目前没有办法 O:-) 但是我只是想出了一个邪恶的黑客 - 你输出一元的数字并使用 [data-mystate^="11111"] 等等：- D
@Blackbam - 是什么产生了这个data-mystate 值？
它是 PHP 输出的数据库编号。但是我知道更改 HTML 会改变实际问题，因此您的答案是正确的。如果有人提出另一个想法，我只是再等一天。

【解决方案2】：

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

如果语句为真，您可以通过使用 Javascript 执行逻辑并向您的 span 添加一个类来实现您想要的，或者为您的 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>

View jsFiddle example

【讨论】：