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

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

但是你知道如何选择所有数值属性值大于或小于某个数字的元素吗？

Answer 1

不，纯 CSS 是没有办法的。

可能的属性选择器是：

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

并且 W3 关于属性选择器的文档 添加了：

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

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

Answer 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>

查看jsFiddle示例

Answer 3

根据阈值有多大，以及您希望 CSS 的干净程度，您可以使用

:not()

和

:is()

来实现此效果 - 如下所示：

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

实际上，我刚刚在我的 Downstyler 项目中使用了这个技巧，为

<select>

属性大于 1 的

size

元素使用自定义样式。