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

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

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

这是有效的HTML。

Answer 2

你不能只在外部样式表中这样做（正如我想你想要的那样）。原因是CSS中没有选择器可以选择那些li元素作为第一个子元素的ul元素。所以你的选择是（除了无限期等待，直到CSS有一个“parent selector”......）：

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

Answer 3

你介意我使用款式吗？ Updated

代码：

        <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列表运行并通过检测子节点添加样式。 Example

代码（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 with both examples

来源：Google

“与XHTML相反，即使以MIME类型text / html提供 - 允许作者省略某些标签。”

来自谷歌：

如果您有一个标记为＆lt; li＆gt;列表项＆lt; / li＆gt;的项目列表，您只需编写＆lt; li＆gt;列表项...

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

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

4 个答案: