是否有一个聪明的类命名方案，可以很容易地为基于数值范围的CSS样式提供挂钩。

一个常见的示例是进度条，它以不同的百分比改变颜色。

它可能会以某种方式提供数字，但在CSS中没有简单的方式说“红色到50%，然后黄色到50%，然后绿色到80%。许多现有的解决方案只会生成100行CSS，每行CSS都预先用预处理器针对单个数字值，然后生成一个类，如。Progress99用于99%的进度，如果您想针对51项的范围，那么您要么使用51个类，要么（49个类来反转选择）。

这很笨拙，但对于100这样的小数目来说是可行的，甚至可以对使用sass mixin的单个用例进行一点优化，这些用例只需要使用最低限度的css来匹配特定项目中所需的一切，并生成无聊的部分。

但是，有没有什么更聪明的方法可以用于类名中可能的任何数字，只需要CSS侧的更改来控制哪个数字范围是针对的？

我假设，如果有人已经这样做了，但也认为在大多数情况下，您可以:

a)将逻辑添加到服务器端，并在数字高于所需值时添加一个。Success类或其他类

b)使用JS在客户端执行上述逻辑。

c)使用第n个子选择器来影响子选择器，如果它是相关的子选择器的数量（尽管您不能用此技巧针对父选择器）

所以可能从来不认为值得付出努力，但这真的可能吗？

顺晟科技：

免责声明:

您可能应该使用javascript来实现您所期望的结果。如果按照您的示例使用百分比系统，这意味着您几乎肯定已经在页面上使用了javascript。

CSS

您可以使用so例如，您想要针对您可以做的第51个百分位数

:nth-of-type(n)

其中有100个div,每个div分类为。您还可以通过使用上面的语法执行高于特定条件（即50%或更多)的值。

:nth-of-type(n)

需要注意的是，它只适用于元素而不适用于类。有关详细信息，请参阅此处的此答案。

示例: 上面我用百分比图类比来描述的几个简洁的例子...

与其从属性中“解析”数字值，不如直接设置numeric自定义属性。这给出了可以直接在CSS中的任何表达式中使用的值。

则可以将此值用于定义关键帧范围（离散状态）或仅定义关键帧点（渐变状态）的暂停动画的“offset”（）。

POC: