html - CSS选择列表项中的第一个字符

Question

我有一个包含大约 10 个列表的页面，其中 5 个是无序的，5 个是有序的。我决定制作一个自定义列表标记，而不是通用圆盘或元素符号/数字或罗马数字。每个列表项都是这样......

<ul>
  <li>*List Item 1</li>
  <li>*List Item 2</li>
</ul>

<ol>
  <li>1List Item</li>
  <li>1List Item</li>
</ol>

我需要做的是选择初始字符为 1、2 或 *。没有使用 span 100 次或 ul 和 ol 的单独样式，有没有办法选择第一个字符。

我试过使用 span，但是有那么多的列表和列表项，就会有很多额外的编码......我也试过 li::首字母 {...}这适用于 ul，但对于 ol 它会导致例如来自“*列表项”的“*L”。

我已经阅读了一些“:before”，这可能是下一个最好的选择，但我希望有一个选择器可以完成所有 li。

感谢您提供任何信息。

编辑:我找到了结合使用::first-letter 和::before 的解决方案，就像这样......

<ul>
  <li>List Item</li>
  <li>List Item</li>
</ul>

<ol>
  <li>1List Item 1</li>
  <li>2List Item 2</li>
</ol>

ol li::first-letter, ul li::before {
 ... // select's all ol and all ul list items
}

ul li::before {
  content: "*";
  ... // adds * as first letter for above
}

Answer 1

我认为 Javascript 在这里最好。

  var liArray = document.getElementsByTagName('li').innerHTML;

  for(i=0;i<liArray.length;i++){
    var buildString = '<span class="customStyle">';
    buildString += liArray[i].subString(0,1);
    buildString += '</span>';
    buildString += liArray[i].subString(1);
    liArray[i].innerHTML = buildString;
  }

快速解释代码。我们首先选择文档中的所有列表元素并将它们保存到名为“liArray”的数组中。

然后我们在 for 循环中遍历该数组，将我们的代码应用于每个元素。

然后我们构建一个"new"字符串，它获取每个列表元素的第一个字符并将其包装在一个具有类“customStyle”的 span 标记中。

只需将类“customStyle”添加到您的 css 文档，您就可以将任何样式应用到 li 的第一个字符。