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

wdebmtf2  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(158)

我想知道以下内容是否可以用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代码当然不会工作,因为“大于”和“小于”符号在这里被解释为属性值。
但是你知道一种方法来选择所有数值属性值大于或小于某个数字的元素吗?

wvt8vs2t

wvt8vs2t1#

不,在纯CSS中没有办法。
可能的属性选择器有:

*[att]
*[att=瓦尔]
*[att~=瓦尔]
*[att| =瓦尔]

W3关于属性名的文档中增加了:
属性值必须是CSS标识符或字符串。[CSS 21]选择器中属性名称和值的大小写敏感性取决于文档语言。
所以,它们不是数字。没有办法使用任何数字比较。

qf9go6mv

qf9go6mv2#

基本的CSS3不支持逻辑--它是严格的样式。
你可以通过使用JavaScript来实现你想要的逻辑,如果语句为真,就给span添加一个类,或者为你的CSS使用一个预处理器,比如LESSSASS
下面是你如何用一个类和纯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

6ojccjat

6ojccjat3#

根据阈值的大小,以及您希望CSS的整洁程度,您可以使用:not():is()来实现此效果-类似于以下内容:

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

实际上,我刚刚在Downstyler项目中使用了这个技巧,为size属性大于1的<select>元素使用了自定义样式。

相关问题