Элементы списка таргетинга по их атрибуту значения

Как я недавно узнал, в HTML5 вы можете использовать атрибут value с элементами списка, если они находятся внутри упорядоченного списка. http://dev.w3.org/html5/markup/li.html

Я пытаюсь создать элементы списка по их значению. Желательно, чтобы я хотел их стиль:

li[value >= "10"] { background: orange; }
li[value >= "20"] { background: green; }

Однако в настоящее время это невозможно с помощью только CSS.

Вот скрипка, с которой я играл, пробую разные вещи. http://jsfiddle.net/Hf57v/2/

HTML:

<ol>
    <li value="33"></li>
    <li value="4"></li>
    <li value="12"></li>
    <li value="88"></li>
    <li value="jadfk"></li>
</ol>

CSS

li { width: 20px; height: 20px; margin: 20px; background: gray; }

li[value~="3"] { background: orange; }  /* #1  */
li[value="4"] { background: red; }      /* #2  */
li[value="12"] { background: blue; }    /* #3  */
li[value^="1"] { background: green; }   /* #4  */
li[value^="8"] { background: yellow; }  /* #5  */
li[value="NaN"] { background: pink; }   /* #6  */

1) Это не работает при создании фона оранжевого цвета для <li value="33"></li>.
Я думал, что с тех пор, как он содержит 3.

2) Это работает при изменении <li value="4"></li> на красный.

3) Это работает при изменении <li value="12"></li> на синий.

4) Это переопределяет синий фон <li value="12"></li> и меняет фон на зеленый. Я думал, что это может быть не так, поскольку ="12 более конкретный, чем ^="1" (начинается с 1).

5) Это работает при изменении <li value="88"></li> на желтый.

6) Это не работает при создании фона для <li value="jadfk"></li>. Я попробовал это, так как значение должно быть числом, поэтому, если это просто строка/текст, он возвращает NaN (а не число).

Также, как работает ol, есть ли значение для li, или значение NaN, тогда li принимает значение из предыдущего li. В скрипте <li value="jadfk"></li> отображается как 89. Но даже если он отображается как 89. Он не подчиняется li[value^="8"] { background: yellow; }, как это делает 88.. Интересно, почему это так.

Главный вопрос: есть ли способ нацеливать значение li на > или < операторов в CSS?

Следующий вопрос: если ответ отрицательный, то есть ли какие-либо хаки или селектор, которые я не включил, которые помогают одновременно перенаправлять больше элементов списка по их значению атрибута значения?

Информация о Bounty:

Ссылка на бонусы jsfiddle http://jsfiddle.net/tuDBL/

В скрипте я создал упорядоченный список (ol), который содержит 130 элементов списка (li), значения которых от 0 до 129. li со значениями от 0 до 9 должны иметь уникальный цвет фона. li со значениями от 10-19 должен иметь уникальный цвет фона. Etc и т.д., Вплоть до 129. Таким образом, в конце будут 12 уникальные цвета фона, и каждый из них будет представлять 10 последовательных значений li. Победителем награды будет, скорее всего, человек, способный сделать это с минимальным количеством допустимых CSS.

Ответы

Ответ 1

Я не предполагаю никаких объяснений, необходимых для тех, которые работают так, как вы ожидали. Вот мысли о других.

Точка 1: (как отмечено в комментарии JoshC) у вас неправильный селектор. li[value*="3"] это то, что вы искали, если вы хотите, чтобы он изменился, потому что он "содержит" 3.

Точка 4: Специфика селектора не имеет ничего общего с селектором атрибутов, а скорее наличие селектора атрибутов сам. Таким образом, li[value="12"] и li[value^="1"] имеют одинаковую специфичность, поскольку обе имеют селектор типа li и привязанный к ним селектор атрибутов [value]. Поэтому выигрывает каскадный порядок css; поэтому в вашем примере li[value^="1"] - последний совпадающий селектор в каскаде, и он выигрывает (если вы отмените порядок, который другой выиграет).

Пункт 6:. css читает только html. Он не видит, что делает сам ol с текстом, который не является числом. Фактически, в Firebug он показывает значение как 0 в моей системе, но [value="0"] все еще не работает. Единственными двумя селекторами, которые будут работать для нечисловых значений, являются фактическое значение li[value="jadfk"] или значение неквалифицированного атрибута li[value], если вы сделали это по умолчанию, то он должен быть первым в порядке ваших вызовов, иначе это сделало бы все из них розовыми (опять же, из-за каскадного порядка и равной специфичности).

Мне не известно о текущем способе непосредственного выполнения оценки > или < для атрибута по вашему желанию без javascript. Что касается взлома, чтобы сделать что-то подобное, мой предыдущий ответ может быть полезен, предполагая, что диапазон номеров ограничен. Этот ответ использует, по существу, ту же технику, что и тот, на который позже ответил Лиор на этот вопрос (он получил идею из моей ссылки, которую я предоставил, или нет, я не знаю, и это не имеет значения), поэтому я не буду повторите кодирование и концепции здесь.

Обновление (добавление решения, совместимого с IE7/8)

Поскольку у Лиора был ответ, похожий на мой связанный ответ, я придумал этот вариант. Он не использует селектор :not() (поэтому, если совместимость с IE7 является проблемой, это может быть предпочтительным). Скорее, он использует общий селектор sibling который совместим с IE7. Он использует 12-13 селекторов (в зависимости от того, хотите ли вы, чтобы первые 10 имели фоновый фон по умолчанию), и использует каскадный порядок для переопределения предыдущих значений цвета (поэтому порядок этих селекторов в css важен).

Пример скрипта

li[value] {background: yellow;} /* if other than default bkg. wanted on 1st 10 */
li[value="9"] ~ li[value] {background-color: red;}
li[value="19"] ~ li[value] {background-color: blue;}
li[value="29"] ~ li[value] {background-color: gray;}
li[value="39"] ~ li[value] {background-color: dimgray;}
li[value="49"] ~ li[value] {background-color: brown;}
li[value="59"] ~ li[value] {background-color: purple;}
li[value="69"] ~ li[value] {background-color: Chartreuse;}
li[value="79"] ~ li[value] {background-color: black;}
li[value="89"] ~ li[value] {background-color: DarkSlateBlue;}
li[value="99"] ~ li[value] {background-color: Bisque;}
li[value="109"] ~ li[value] {background-color: Indigo;}
li[value="119"] ~ li[value] {background-color: Lavender;}

(Благодаря коду Lior для значений цвета, используемых здесь - да, я их проверил.)

Это также работает только потому, что мы имеем дело с упорядоченным списком. Предыдущий ответ, с которым я связан, мы не были (числа были произвольными и ни в коем случае).

Технически некоторые из вышеперечисленных селекторов являются избыточными

Предполагая, что атрибут value находится только в упорядоченном списке, тогда селектора могут быть сведены к следующему:

Пример скрипта

[value] {background: yellow;} /* if other than default bkg. wanted on 1st 10 */
[value="9"] ~ li {background-color: red;}
[value="19"] ~ li {background-color: blue;}
[value="29"] ~ li {background-color: gray;}
[value="39"] ~ li {background-color: dimgray;}
[value="49"] ~ li {background-color: brown;}
[value="59"] ~ li {background-color: purple;}
[value="69"] ~ li {background-color: Chartreuse;}
[value="79"] ~ li {background-color: black;}
[value="89"] ~ li {background-color: DarkSlateBlue;}
[value="99"] ~ li {background-color: Bisque;}
[value="109"] ~ li {background-color: Indigo;}
[value="119"] ~ li {background-color: Lavender;}

Ответ 2

Вариант 1:

С помощью селектора CSS3 :not мы можем свести правила CSS к минимуму. Взгляните на это:

Дайте цвет фона для всех li (это повлияет только на значения 0-9), а затем используйте отрицание :not для всех других правил в дополнение к селектору значений.

Пример:

li[value^="1"]:not([value="1"]) {background-color: red;}
li[value^="2"]:not([value="2"]) {background-color: blue;}
li[value^="3"]:not([value="3"]) {background-color: gray;}
li[value^="4"]:not([value="4"]) {background-color: dimgray;}
li[value^="5"]:not([value="5"]) {background-color: brown;}
li[value^="6"]:not([value="6"]) {background-color: purple;}
li[value^="7"]:not([value="7"]) {background-color: Chartreuse;}
li[value^="8"]:not([value="8"]) {background-color: black;}
li[value^="9"]:not([value="9"]) {background-color: DarkSlateBlue;}
li[value^="10"]:not([value="10"]) {background-color: Bisque;}
li[value^="11"]:not([value="11"]) {background-color: Indigo;}
li[value^="12"]:not([value="12"]) {background-color: Lavender;}

Всего 12 строк. Здесь скрипка - http://jsfiddle.net/eF74N/5/

Вариант 2:

Применение стиля ко всем наборам из десяти li (10-19, 20-29 и т.д.), причем только те, которые будут также применяться к 10,11,12,13, имеющим :not селектор.

Затем перезаписываем значения со значениями 0-9 со своими собственными стилями.

http://jsfiddle.net/eF74N/2/

Примечание. Селектор :not поддерживается от IE9 и выше (и, конечно, настоящих браузеров), он очень полезен, MDN docs: https://developer.mozilla.org/en/docs/Web/CSS/:not

Вариант 3

Возьмите вариант 1, немного дольше, но обратно совместимый с IE7. Переопределение 10,11,12,13 элементов с другим правилом, основанным на значении, вместо селектора :not. Дополнительное правило:

li [value = "10" ], li [value = "11" ], li [value = "12" ], li [value = "13" ] {background-color: red;}

http://jsfiddle.net/eF74N/8/