嵌套列表中去除重复的符号点

Question

嵌套列表有双重符号。一个是用于li，另一个是用于子列表。 示例

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

- Yamiko

Answer 1

您不能仅使用外部样式表（我想您可能希望这样做）。原因是CSS中没有选择器可以选择那些具有ul元素作为第一个子元素的li元素。因此，除了无限期地等待CSS拥有“parent selector”之外，您的选择是：

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

- Jukka K. Korpela

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";

- Dave Chen

---

不，我想在我的CSS样式表中完成，但如果不可能的话，我可以使用一个类。 - Yamiko

Answer 3

嵌套列表应该是列表项的子元素，像这样：

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

这是有效的HTML。

- Niet the Dark Absol

---

嵌套列表是问题中列表项的子级。此答案未解决如何在问题所示的标记中删除其中一个项目符号的问题。 - Jukka K. Korpela

这是问题中唯一列表项的唯一子项，而在这里它是前面列表项内的兄弟项。 - Niet the Dark Absol

我认为从语义上讲，这样做更有意义，因为嵌套的ul应该是所缩进的列表项的子元素。 - Joel McBeth

Answer 4

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

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

请注意，目前并非所有浏览器都完全支持此功能，但根据Caniuse（撰写时覆盖率为86.19%）的数据，覆盖范围已经相当不错了。

- Sylvareth

Answer 5

快速技巧：移除列表项：

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

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

JSFIDDLE带有两个示例

来源：Google

"与XHTML相反，即使使用MIME类型text / html传递，也允许作者省略某些标记。"

来自谷歌：

如果您有一个被标记为&ltli>列表项</li>的项目列表，则可以只编写&ltli>列表项...

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

- Jay Harris

---

这是否被认为是有效的HTML？ - Yamiko

不确定我能否检查。这就像清除浮动和其他HTML hack一样。 - Jay Harris

真的吗？通过设置溢出隐藏或添加一个具有清除属性的元素来使浏览器计算浮动元素的高度和宽度。这不算是一种hack吗？ - Jay Harris

这是无效的，意味着需要更改标记。问题似乎是如何在给定的标记中实现特定的样式。 - Jukka K. Korpela

我误读了答案中的标记，因为它的格式很奇怪（缩进与元素嵌套不对应），抱歉。然而，这并不是回答如何防止在使用问题中给出的标记时出现双重符号的问题。 - Jukka K. Korpela