Question

正如我最近了解到的，在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 value="jadfk"></li>呈现为89.但即使它呈现为89.它也不像li[value^="8"] { background: yellow; }那样服从88.。我想知道为什么会这样。

主要问题：有没有办法在CSS中>或<运算符定位li值？

跟进问题：如果答案是否定的，那么是否有任何我没有包含的黑客或选择器可以帮助同时根据其属性值来定位更多列表项？

Bounty Info：

赏金jsfiddle链接http://jsfiddle.net/tuDBL/

在小提琴中，我创建了一个有序列表（ol），其中包含130个列表项（li），其值为0到129. li的值为li从0-9需要有一个独特的背景颜色。值为10-19的li需要具有唯一的背景颜色。等等，一直到129.所以最后，将有 12 独特的背景颜色，每个颜色代表10个连续的{{1}}值。赏金获胜者很可能是能够用最少量的有效CSS做到这一点的人。

Answer 1

我认为对那些按预期工作的人不需要解释。以下是关于其他人的想法。

第1点：（如JoshC的评论中所述）你有错误的选择器。 li[value*="3"] is what you were looking for如果您希望更改它，因为它“包含”3。

第4点：选择器特异性与内部属性选择器无关，而是the presence of the attribute selector itself。因此li[value="12"]和li[value^="1"]具有完全相同的特异性，因为两者都有类型选择器li和属性选择器[value]。因此，css级联顺序胜出;因此，在您的示例中，li[value^="1"]是级联中的 last 匹配选择器，并且获胜（if you reversed the order the other would win）。

第6点：css仅读取html。它没有看到ol本身对不是数字的文本做了什么。实际上，在Firebug中，它在我的系统上显示的值为0，但[value="0"] still does not work。仅适用于非数值的两个选择器是the actual value itself li[value="jadfk"]或li[value]的非限定属性值，如果您将其设为默认值，则为it would need to be first in the order of your calls，否则it would make all of them pink（再次，因为级联顺序和相同的特异性）。

我不知道目前有哪种方法可以根据您的需要直接对>或<进行评估，而无需使用javascript。至于做类似事情的黑客，a previous answer of mine may be helpful，假设数字范围有限。这个答案使用的技术与Lior后来对这个问题的答案所提出的技巧基本相同（他是否从我提供的链接中得到了这个想法，我不知道，也不是真的重要），所以我不会在这里重复编码和概念。

更新（添加IE7 / 8兼容解决方案）

由于Lior的答案类似于我的链接答案，我想出了这个选项。它不使用:not()选择器（因此，如果IE7兼容性是一个问题，这可能是更好的选择）。相反，它使用了一般的兄弟选择器which is IE7 compatible。它使用12-13个选择器（取决于你是否希望前10个具有默认背景），并利用级联顺序覆盖以前的颜色值（因此css中这些选择器的顺序很重要）。 / p>

Fiddle Example

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属性仅在有序列表中，则选择器可以简化为：

Fiddle Example

[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;}

Answer 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：

将样式应用于所有10个li（10-19,20-29等等）的集合，只有那些也适用于10,11,12,13的{ {1}}选择器也是。

然后用自己的样式覆盖0-9值的那些。

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

注意：IE9及以上（当然还有真正的浏览器）支持:not选择器，它非常有用，MDN文档： https://developer.mozilla.org/en/docs/Web/CSS/:not

选项3

选项1，稍长一点，但向后兼容IE7。使用另一个基于值的规则而不是:not选择器覆盖10,11,12,13个元素。附加规则是：

li [value =“10”]，li [value =“11”]，li [value =“12”]，li [value =“13”] {background-color：red;}

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

Answer 3

CSS3-way（应该在IE8及更低版本以外的任何地方工作）： http://jsfiddle.net/u95Kd/

这里有:nth-child()工作的一些信息： http://caniuse.com/#feat=css-sel3

按值属性定位列表项

3 个答案:

更新（添加IE7 / 8兼容解决方案）