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

daupos2t  于 2023-04-23  发布在  其他
关注(0)|答案(5)|浏览(94)

嵌套列表有两个项目符号。一个用于li,另一个用于子列表。
example

<ul>
        <li>item</li>
        <li>item</li>
        <li>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </li>
    </ul>
9rnv2umw

9rnv2umw1#

你不能只在外部样式表中做到这一点(我认为你会想这样做)。原因是CSS中没有选择器可以选择那些第一个子元素是ulli元素。所以你的选择是(除了无限期地等待直到CSS有一个“parent selector“...):

  • class添加到这样的li元素中,并使用类选择器。这通常是首选方法。
  • 使用JavaScript来识别这样的li元素并处理它们,例如向它们添加类。
  • 使用内联CSS,即li元素中的style属性。
moiiocjp

moiiocjp2#

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

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

这是有效的HTML。

c3frrgcw

c3frrgcw3#

你介意我使用样式吗?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";
cgvd09ve

cgvd09ve4#

在现代CSS中,你可以像这样使用has-selector

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

请注意,这并不是所有浏览器都完全支持的,但根据Caniuse(在撰写本文时覆盖率为86.19%),目前的覆盖率相当不错。

ie3xauqp

ie3xauqp5#

快速破解:删除列表项:

<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交付-允许作者省略某些标记。

Google:
如果你有一个项目列表标记为&ltli〉Listitem,你可以只写&ltli〉Listitem...

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

相关问题