Стилизация элемента CSS в зависимости от его стоимости - PullRequest
Новая
       21

Стилизация элемента CSS в зависимости от его стоимости

8 голосов
/ 02 марта 2011

У меня есть список процентов, которые варьируются от 0% до 200%.

Есть ли способ стилизовать эти числа в зависимости от их значения, то есть сделать цифры 0% - 100% зелеными, а цифры 101%> красными?

Обратите внимание, у меня нет доступа к HTML для этого, только CSS.

Заранее спасибо,

Том Перкинс

Edit:

Рассматриваемый 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;
}

Надеюсь, это поможет.

Ответы [ 4 ]

8 голосов
/ 02 марта 2011

Если бы вы могли установить процент <100%, чтобы начать с 0, например 099%, вы можете использовать attr, начинающийся с, и attr равен селектору.Работает в современных браузерах и т. Е. 7 + </p> 

 .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 нечетных вариантов, которые у вас есть, что довольно долго складывается

0 голосов
/ 02 марта 2011

Я также не уверен, что на данный момент нет возможности использовать только CSS ... Я бы предложил определить два CSS-класса "зеленый" и "красный" (или соответствующий) и сделать небольшую оценку в JavaScript или PHPприсвоить классы элементам ...

Извините, но для этого нужен доступ к HTML в любом виде.

0 голосов
/ 02 марта 2011

Это действительно зависит от типа и структуры элементов HTML, которые вы хотите выбрать.Если у вас есть только <span> или <td> элементы без какой-либо семантической структуры, это не сработает.

Но если у вас есть такие атрибуты, как title, class и т. Д., Вы можете сделать это.СТГ.как это: 

span[attributeName="attributeValue"] {color: #FF0000}
0 голосов
/ 02 марта 2011

Так как есть оценка значений, это не может быть сделано с помощью CSS.

Но Javascript может делать то, что вы ищете.

...