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

Question

嵌套列表有双项目符号。一个用于 the li，另一个用于子列表。

例子

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

Answer 1

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

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

这是有效的 HTML。

Answer 2

您不能仅在外部样式表中执行此操作（我想您会希望这样做）。原因是 CSS 中没有选择器可以选择那些li将ul元素作为第一个子元素的元素。所以你的选择是（除了无限期地等待CSS有一个“<a href="https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector">父选择器”...... ):

• 添加class到此类li元素并使用类选择器。这通常是首选方式。
• 使用能够识别这些li元素并处理它们的 JavaScript，例如向它们添加一个类。
• 使用内联 CSS，即style这些li元素中的属性。

Answer 3

你介意我用样式吗？更新

代码：

        <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 4

快速破解：删除列表项：

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

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

带有两个示例的 JSFIDDLE

来源：谷歌

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

来自谷歌：

如果您有一个标记为 <li>List item</li> 的项目列表，则可以改为编写 <li>List item...

省略可选标签可让您的 HTML 正式有效...