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代码当然不能用作＆＃34;大于＆＃34;和＆＃34;小于＆＃34;符号在这里被解释为属性值。

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

Answer 1

不，纯CSS中没有办法。

可能的属性选择器是：

的 [ATT]

的 [ATT = VAL]

的 [ATT〜= VAL]

的 [ATT | = VAL]

W3's docs on Attribute Selector补充道：

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

所以，他们不是数字。没有办法使用任何数字比较。

Answer 2

基本CSS3不支持逻辑 - 它是严格的风格。

如果语句为真，您可以通过使用Javascript来执行逻辑并向span添加类，或者为CSS使用预处理器，例如LESS或{ {3}}

以下是使用类和纯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>

SASS

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

2 个答案: