按值属性定位列表项

Posted 2023-03-06

【中文标题】按值属性定位列表项

【英文标题】：Targeting List Items by their Value Attribute

【发布时间】：2014-02-07 14:21:23

【问题描述】：

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

---

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

后续问题：如果答案是否定的，那么是否有任何我没有包含的技巧或选择器有助于同时通过其 value 属性的值来定位更多列表项？

---

赏金信息：

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

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

【问题讨论】：

关于第 1 点： 它不起作用，因为~ 表示一个属性 "，其值是一个以空格分隔的单词列表，其中一个是一个确切的值” (ref) .. 这适用于 value="3 3"> 你的意思是 * ([value*="3"]) 吗？ jsfiddle.net/Lr5nJ

【参考方案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 中的顺序很重要）。

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;

【讨论】：

在我注意到我的名字之前，我不得不说我没有访问过你的链接（实际上我想我还没有读过你的那部分答案）......这可能是一种耻辱为我节省了一些时间，虽然你的例子是关于类的。

@Lior：就像我说的，这并不重要。它不像我在这个概念上有一个角落市场。我只是发现有趣的是，我提供的链接基本上与您提出的解决方案相同。这也是在我对 OP 的回答中不复制代码的一个很好的理由，因为我最终会反映你的回答。

好的，我只是想确保没有难过的感觉。事实上，我们都想过使用 :not 选择器（我希望这很明显）并不是一个巧合，也并不意味着它们是相互分离的，但就像你说的那样，它没有没关系。

@Lior：根本没有。我在解决方案中添加了自己的转折，以提供不同的选项作为答案。它在保持 IE7 兼容性的同时使用更少的代码。

【参考方案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 文档： 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"] 背景色：红色;

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

【讨论】：

+1 因为它有效，即使值是混合的。我可能会用li[value="10"]、li[value="11"] 等覆盖以前的颜色，而不是使用:not。它使你的 css 更长，而且向后兼容 IE7+ Fiddle

酷谢谢@chrona，这是一个干净简单的解决方案（虽然不是你指出的短裤），我会更新我的答案并添加这个选项。

【参考方案3】：

CSS3 方式（应该在除 IE8 及更低版本之外的所有地方都可以使用）： http://jsfiddle.net/u95Kd/

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

【讨论】：

我喜欢所选择的颜色，但我认为 li 的值应该是解决方案的一部分。否则，就像 Salman 所写的那样，它基于订单而变得脆弱。

@Lior 使用价值观作为解决方案，我会坚持你的想法。