我想知道以下内容是否可以用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代码当然不会工作,因为“大于”和“小于”符号在这里被解释为属性值。
但是你知道一种方法来选择所有数值属性值大于或小于某个数字的元素吗?
3条答案
按热度按时间wvt8vs2t1#
不,在纯CSS中没有办法。
可能的属性选择器有:
*[att]
*[att=瓦尔]
*[att~=瓦尔]
*[att| =瓦尔]
而W3关于属性名的文档中增加了:
属性值必须是CSS标识符或字符串。[CSS 21]选择器中属性名称和值的大小写敏感性取决于文档语言。
所以,它们不是数字。没有办法使用任何数字比较。
qf9go6mv2#
基本的CSS3不支持逻辑--它是严格的样式。
你可以通过使用JavaScript来实现你想要的逻辑,如果语句为真,就给
span
添加一个类,或者为你的CSS使用一个预处理器,比如LESS或SASS。下面是你如何用一个类和纯JavaScript来做这件事:
View jsFiddle example
6ojccjat3#
根据阈值的大小,以及您希望CSS的整洁程度,您可以使用
:not()
和:is()
来实现此效果-类似于以下内容:实际上,我刚刚在Downstyler项目中使用了这个技巧,为
size
属性大于1的<select>
元素使用了自定义样式。