Html 使用css根据数值为文本着色

我想使用css根据文本的值给文本上色

ie. if value is less than 20 --> red ,
    if value is between 20 - 60 --> orange , 
    if value is greater than 60 to 100--> green.

我不想根据值在模板中添加任何类

我找到了这个链接：但它不够，因为我有太多的值要应用颜色。 另外，我希望在将来添加新值时它更易于维护。

一个简单的方法是 HTML

高

低

中等

关键的

高

滑动分页
var content=$（“.content p”）.text（）；
如果（内容=“高”）{
$（this.css（“color”和“#ffffff”）；
}
如果（内容=“低”）{
$（this.css（“color”，“#ccc”）；
}
如果（内容=“关键”）{
$（this.css（“color”和“#000”）；
}

仅使用CSS是不可能的

您必须使用JavaScript/jQuery根据

对象

颜色匹配以友好方式添加颜色，并测试

数据颜色

HTML属性中的值是否在每个元素的范围内

JS代码动态检查元素属性是否在颜色范围内，并应用匹配的颜色

如果将来需要添加一些颜色和范围，只需在

colorMatch

哈希中添加新值，并更新CSS颜色类列表

CSS HTML

---

不添加类吗？唯一可以执行此操作的方法是根据文本颜色的值动态添加类。使用if…else或switchIt

不可能

仅使用css请给我们一个代码示例，以便我们可以为您提供一个有效的解决方案（即：发布您不能使用？另请参见不仅您希望根据元素的内容进行样式设置（目前还不可能），您还希望有条件地使用该内容设置样式。CSS不是为此而构建的。您的代码没有回答这个问题。您正在匹配精确的文本值，但问题是在某些间隔中匹配int值。我喜欢，只需添加.valueOf（）转换为数字并执行数字大小写。这种方法似乎非常易于维护。谢谢。如果

data color=“19”

是asp标签的结果而不是“19”，会发生什么？在这种情况下，您不能使用my JS：您必须事先知道asp标签的结果，然后根据它编写脚本。

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>

Jquery
var content = $(".content p").text();

    if (content == "high") {

        $(this).css("color", "#ffffff");
    }
   if (content == "low") {

        $(this).css("color", "#ccc");
    }
   if (content == "critical") {

        $(this).css("color", "#000");
    }

.red {color:red}

<p data-color="19">Lorem 19</p>

var colorMatch = {
    '0-19'     : 'red',
    '20-59'    : 'orange',
    '60-100'   : 'green'
 };