按值属性定位列表项

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,如果a没有值li,或者值是NaN,则li接受前一个li的值.在小提琴中,<li value="jadfk"></li>呈现为89. 但是即使它呈现为89.它不遵守li[value^="8"] { background: yellow; }类似的做法88..我不知道这是为什么.

---

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

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

---

赏金信息:

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

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

Answer 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.对于做类似事情的黑客行为,假设数量范围有限,我之前的回答可能会有所帮助.这个答案使用的技术与Lior后来对这个问题的答案所提出的技巧基本相同(他是否从我提供的链接中得到了这个想法,我不知道,也不是真的重要),所以我不会在这里重复编码和概念.

更新(添加IE7/8兼容解决方案)

由于Lior的答案类似于我的链接答案,我想出了这个选项.它不使用:not()选择器(所以如果IE7兼容性是一个问题,这可能是更好的选择).相反,它使用与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;}

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:

将样式应用于所有十个集合li(10-19,20-29等...),只有那些也适用于具有:not选择器的10,11,12,13 .

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

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

注意::not选择器是从IE9及以上(当然还有真正的浏览器)支持的,它非常有用,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/