CSS数据属性条件值选择器？

Question

给定的 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('larger-than-x'); // Or whatever
    }
});

Answer 1

使用 CSS，您可以选择带有属性的元素:

div[data-points] {  }

或者它们的属性值:

div[data-points="800"] {  }

但是你不能在 CSS 中使用条件。
我建议您使用 javaScript 解决方案来解决这个问题，它非常简单，例如，使用 jQuery，您可以执行以下操作:

$("div[data-points]").each(function() {
    if ($(this).attr('data-points') > 1000) {
        $(this).addClass('larger-than-1000'); // Or whatever
    }
});