html – 按其属性定位列表项

我最近才知道,在 HTML5中,您可以使用value属性与列表项,只要它们在有序列表中. http://dev.w3.org/html5/markup/li.html @H_403_2@我一直在试图用它们的价值来设计列表项.最好我喜欢他们的风格：

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

@H_403_2@但是,目前来说,这是不可能的.

@H_403_2@这是一个我一直在玩的小提琴,尝试不同的东西. http://jsfiddle.net/Hf57v/2/

@H_403_2@HTML：

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

@H_403_2@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  */

@H_403_2@1)对于< li value =“33”>< / li&gt ;.使背景变为橙色,这不起作用.
我以为它会包含3.

@H_403_2@2)这可以改变< li value =“4”>< / li>到红色

@H_403_2@3)这可以改变< li value =“12”>< / li>到蓝色

@H_403_2@4)这将覆盖< li value =“12”>< / li>背景蓝色,并将背景更改为绿色.我以为可能不会因为=“12比^ =”1“更具体(以1开头).

@H_403_2@5)这可以改变< li value =“88”>< / li>变黄

@H_403_2@6)对于< li value =“jadfk”>< / li&gt ;.使背景粉红色不起作用.我尝试了它,因为值必须是一个数字,所以如果它只是一个字符串/文本,它返回NaN(不是一个数字). 另外,ol的工作方式是,如果没有一个li的价值,或者是NaN的价值,那么这个li就取自前一个li的值.在小提琴中,< li value =“jadfk”>< / li>呈现为89.但即使它呈现为89.它不服从li [value ^ =“8”] {background：yellow;像88.那样.我不知道为什么会这样.

@H_403_2@主要问题：有什么办法可以通过>或者,操作符在CSS？

@H_403_2@跟进问题：如果答案是否定的,那么我没有包含哪些黑客或者选择器可以帮助您通过其值属性的值同时定位更多的列表项？

@H_403_2@赏金信息：

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

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

解决方法

我认为没有任何解释需要按照你的预期工作.这里有关于别人的想法. @H_403_2@点1：(如JoshC的评论中所述),您的选择器错误. li [value * =“3”] is what you were looking for如果你想改变,因为它“包含”a 3.

@H_403_2@第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).

@H_403_2@第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(再次,因为级联顺序和相同的特殊性).

@H_403_2@我不知道现在有什么方法来直接进行>或者,一个属性,如你所愿,没有javascript.对于一个黑客做这样的事情,a previous answer of mine may be helpful,假设数字范围有限.那个答案使用的是基本上和Lior稍后回答这个问题的答案相同的技术(他是否从我提供的链接中得到了这个想法),也没有真正重要),所以我不会重复这里的编码和概念.

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

@H_403_2@由于Lior有一个类似于我的链接答案的答案,我想出了这个选择.它不使用：not()选择器(所以如果IE7兼容性是一个问题,这可能是更好的).相反,它使用通用兄弟选择器which is IE7 compatible.它使用12-13个选择器(取决于您是否希望前10个具有默认背景),并使用级联顺序来覆盖以前的颜色值(因此,这些选择器在css中很重要).

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

@H_403_2@(感谢Lior的代码,这里使用的颜色值 – 是的,我刷了那些.)

@H_403_2@这也只是因为我们正在处理一个有序的列表.以前的答案我链接到,我们没有(数字是任意的,没有关系).

@H_403_2@从技术上讲,上面的一些选择器是多余的

@H_403_2@假设value属性仅在有序列表上,则可以将选择器缩减为：

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

html – 按其属性定位列表项

解决方法

猜你在找的HTML相关文章