根据起始值而不是 Nth-Child 选择 OL LI答案

【问题标题】：Select an OL LI based on the starting value and not the Nth-Child根据起始值而不是 Nth-Child 选择 OL LI
【发布时间】：2016-02-19 02:10:51
【问题描述】：

有没有办法在 CSS 中根据起始值而不是 nth-child 来选择 OL 的 LI。

例子：

<ol>
  <li></li>     // 1.
  <li></li>     // 2.
  <li></li>     // 3.
  <li></li>     // 4.
</ol>

<ol start="3">
  <li></li>     // 3.
  <li></li>     // 4.
</ol>

在示例中，目标是通过 CSS 定位值为 3 的 li。在顶级 OL 中，它将是第三个，在第二个 OL 中，它将是第一个，因为它已经从 3 开始。我正在避免使用多个第 n 个子修复，我希望通过定位该 LI 的实际数量来查看是否可以不使用它。

有谁知道这是否可行？

【问题讨论】：

没有 JavaScript。 CSS 无法读取元素的内容。曾经有一个 :contains 存在，但不再存在。
@j08691: :contains 在这里没有任何用处，因为 is 没有可匹配的内容。 LI 的序数值不是其内容的一部分，除非它字面上出现在输出中。

标签： html css css-selectors html-lists

【解决方案1】：

不幸的是，CSS 没有提供一个选择器来匹配列表项的序号。它肯定会成为未来 Selectors 规范的一个很好的补充（我还没有看到类似的提议），例如，假设浏览器已经将“列表项”语义直接内置到 HTML LI 元素中，允许它们利用这样的选择器。

CSS 也不提供参数化选择器的能力，让您可以编写动态属性或:nth-child() 匹配（请参阅How can I use/emulate regex-like backreferences in attribute selectors?）。最接近的方法是使用公式ol[start=$i] > li:nth-child($i) 让预处理器输出尽可能多的静态选择器。这是 SCSS 中的一个示例：

%item-3 {
  color: red;
}

ol:not([start]) > li:nth-child(3) {
  @extend %item-3;
}

// Assumes start attribute, if specified, begins with 2
@for $i from 2 through 3 {
  ol[start="#{$i}"] > li:nth-child(#{4 - $i}) {
    @extend %item-3;
  }
}

当然，最困难的部分是确定您需要多少个。

【讨论】：