正如我最近了解到的，在 HTML5 中，您可以对列表项使用 value 属性，只要它们在有序列表中即可。 http://dev.w3.org/html5/markup/li.html

我一直在尝试根据它们的值来设置列表项的样式。最好我想像这样设计它们:

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

但是，目前仅使用 CSS 是不可能的。

这是我一直在玩的 fiddle ，尝试不同的东西。 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 没有值(value), 或者值为 NaN , 那么 li取前一个 li 的值。在 fiddle 中，<li value="jadfk"></li>呈现为 89.但即使它呈现为 89.它不遵守 li[value^="8"] { background: yellow; }喜欢 88.做。我想知道这是为什么。

主要问题:有没有办法通过 > 来定位 li 值？或 < CSS 中的运算符？

跟进问题:如果答案是否定的，那么是否有任何我没有包含的 hack 或选择器确实有助于同时通过其 value 属性的值来定位更多列表项？

赏金信息:

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

在 fiddle 中，我创建了一个有序列表(ol)，其中包含 130 个列表项(li)，其值从 0 到 129。li值介于 0-9 之间的 需要具有独特的背景颜色。 li值介于 10-19 之间的 需要具有独特的背景颜色。等等等等，一直到129。所以最后会有12种不同的背景色，每一种都代表10个连续的li。值。赏金赢家很可能是能够使用最少数量的有效 CSS 做到这一点的人。

最佳答案

对于那些按您预期工作的，我假设不需要任何解释。以下是关于其他人的想法。

第 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"]是级联中的最后一个匹配选择器，它获胜(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 中的顺序很重要)。

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

关于css - 按值属性定位列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21199701/