根据起始值而不是第 N 个子项选择 OL LI

Question

CSS中有没有办法根据起始值而不是第n个子值选择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 的实际数量来摆脱它。

有谁知道这是否可能？

Answer 1

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

CSS 也没有提供以允许您编写动态属性或:nth-child()匹配的方式参数化选择器的功能（请参阅如何在属性选择器中使用/模拟类似正则表达式的反向引用？您可以获得的最接近的是让预处理器输出尽可能多的静态选择器，您需要使用公式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;
  }
}

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