根据它的值设计CSS项目

我有一个从0％到200％的百分比列表。根据它的值设计CSS项目

有没有一种方法可以根据它们的值设置这些数字的样式，即使数字0％ - 100％为绿色，数字为101％>红色？

请注意，我无法访问此HTML的HTML，只是CSS。

由于提前，

汤姆·珀金斯

编辑：

有问题的HTML写着：

<td class="HtmlGridCell" colspan="5" align="Left"> </td> 
    <td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>

而CSS写着：

@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") { 
.progress:after { 
content: attr(title); 
font-size: 14px; 
position: relative; 
left: 122px; 
top: -27px; 
float: left; 
color: #666; 
background-color: #efefef; 
-moz-border-radius: 4px; 
padding: 5px; 
border: 1px solid #cfcfcf; 
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

希望有所帮助。

来源

2011-03-02 Tom Perkins

你说的是什么类型的HTML元素？ – Sarfraz 2011-03-02 10:10:27

您应该显示您的代码，以便我们能够更好地帮助您，否则任何答案都只是猜测。 – Kyle 2011-03-02 10:26:55

上面添加的代码。 – 2011-03-02 10:54:07

如果你可以设置百分比< 100％，开始与0喜欢099％，你可以使用attr开头和Attr等于选择。作品在现代浏览器和IE 7 +

.progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/ 
.progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */

或者你可以让你拥有所有200种多变化的选择，这是相当长篇大论

来源

2011-03-02 11:10:56 Blowsie

真的很有帮助，谢谢！ – 2011-03-02 11:14:49

没问题，继承人在attr选择器上的一些有用的信息http://css-tricks.com/attribute-selectors/ – Blowsie 2011-03-02 11:53:41

因为，所涉及的值有评估，它不能用CSS来完成。

但是，Javascript可能会做你正在寻找。

来源

2011-03-02 10:09:45

我也不相信现在只使用CSS是不可能的......我会建议定义两个CSS类“绿色”和“红色”（或相应的），并在JavaScript中进行小型评估或PHP将类分配给元素...

对不起，但这需要访问任何类型的HTML。

来源

2011-03-02 10:13:14 poeschlorn

这真的取决于您想要选择的HTML元素的种类和结构。如果只有<span>或<td>元素没有任何语义结构，它将不起作用。

但是，如果你碰巧有像title，class等属性，你可以做某事。像这样：

span[attributeName="attributeValue"] {color: #FF0000}

来源

2011-03-02 10:22:14 gunnarsson

根据它的值设计CSS项目

回答

相关问题