CSS数据属性条件值选择器？ [英] CSS data attribute conditional value selector?

问题描述

给定html，例如：

 < div data-points =800> Jonh< / div> 
< div data-points =200> Jack< / div> 
< div data-points =1200> Julian< / div> 
  

如何选择元素的值优于 1000 （x> 1000）？

偏好：通过CSS选择器。如果没有这样的事情，那么我将重新请求一个JQuery / JS答案。

---

最终使用：

  var x = 1000; 
 $（div）。each（function（）{
 if（$（this）.attr（'data-points'）> x）{
 $（this）。 addClass（'greater-than-x'）; // Or whatever 
} 
}）;使用CSS可以选择具有以下属性的元素：        / p> 
 
 
  div [data-points] {} 
  
或其属性值：
  div [data-points =800 ] {} 
  
但不能在CSS中使用条件。
 
我建议你使用一个javaScript解决方案这个问题，可以这么容易，例如，使用jQuery你可以做类似：
  $（div [data-points]）每个（function（）{
 if（$（this）.attr（'data-points'）> 1000）{
 $ （this）.addClass（'greater-than-1000'）; // Or whatever 
} 
}）; 
  
 
Given html such as :
<div data-points="800">Jonh</div>
<div data-points="200">Jack</div>
<div data-points="1200">Julian</div>
How to select elements were the value is superior to 1000 (x>1000) ?

Preference : via CSS selectors. If no such thing, then I will re-ask for a JQuery / JS answer.



Eventually used :
var x = 1000;
$("div").each(function() {
    if ($(this).attr('data-points') > x) {
        $(this).addClass('larger-than-x'); // Or whatever
    }
});

解决方案
With CSS you can select elements with their attributes:
div[data-points] {  }
or the value of their attributes:
div[data-points="800"] {  }
but you can't use conditions in CSS.

I would recommend you to use a javaScript solutions for this problem which can be so easy, for example, using jQuery you can do something like:
$("div[data-points]").each(function() {
    if ($(this).attr('data-points') > 1000) {
        $(this).addClass('larger-than-1000'); // Or whatever
    }
});


                        
这篇关于CSS数据属性条件值选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！