删除嵌套列表中的双项目符号

Question

嵌套列表有双项目符号。一个用于

li

，另一个用于子列表。

示例

    <ul>
        <li>item</li>
        <li>item</li>
        <li>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </li>
    </ul>

Answer 1

您不能仅在外部样式表中执行此操作（我想您会想要这样做）。原因是 CSS 中没有选择器可以选取那些将

li

元素作为第一个子元素的

ul

元素。所以你的选择是（除了无限期地等待直到CSS有一个“parent选择器”......）：

• 将

  class

  添加到此类

  li

  元素并使用类选择器。这通常是首选方式。
• 使用可识别此类

  li

  元素并处理它们的 JavaScript，例如为它们添加一个类。
• 使用内联 CSS，即那些

  style

  元素中的

  li

  属性。

Answer 2

如果我使用样式你介意吗？ 更新了

代码：

<ul>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </li>
</ul>
<ol>
    <li>item</li>
    <li>item</li>
    <li style="list-style:none">
        <ol>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ol>
    </li>
</ol>

另一种方法可能是运行 LI 列表并通过检测子节点来添加样式。 示例

代码（HTML相同）：

var li = document.getElementsByTagName("li");
    
for (var i=0, max=li.length; i < max; i++)
    if (li[i].childNodes.length > 1)
        li[i].style.listStyle = "none";

Answer 3

嵌套列表应该是列表项之一的子项，如下所示：

<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
    </ul>
  </li>
</ul>

这是有效的 HTML。

Answer 4

在现代 CSS 中，您可以像这样使用 has-selector：

ul li:has(ul),
ol li:has(ol) {
   list-style: none;
}

请注意，尚未在所有浏览器中完全支持此功能，但根据 Caniuse 目前的覆盖率相当不错（在撰写本文时为 86.19% 的覆盖率）。

Answer 5

快速破解：删除列表项：

<ul>
    <li>item
    <li>item
    <ul>
         <li>item
         <li>item
         <li>item
    </ul>
</ul>

如果您不关闭标签，浏览器将正确呈现它，即没有额外的项目符号。注意：这是有效的 html，因为您不需要关闭

<li>

标签。

JSFIDDLE 两个示例

来源：谷歌

“与 XHTML 不同，即使使用 MIME 类型 text/html 进行交付，也允许作者省略某些标签。”

来自谷歌：

如果您有一个标记为

List item

的项目列表，您可以只写

List item...

省略可选标签可以使您的 HTML 保持正式有效...