嵌套列表有两个项目符号。一个用于li,另一个用于子列表。example
li
<ul> <li>item</li> <li>item</li> <li> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </li> </ul>
9rnv2umw1#
你不能只在外部样式表中做到这一点(我认为你会想这样做)。原因是CSS中没有选择器可以选择那些第一个子元素是ul的li元素。所以你的选择是(除了无限期地等待直到CSS有一个“parent selector“...):
ul
class
style
moiiocjp2#
嵌套列表应该是列表项之一的子项,如下所示:
<ul> <li>item</li> <li>item <ul> <li>item</li> </ul> </li> </ul>
这是有效的HTML。
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";
cgvd09ve4#
在现代CSS中,你可以像这样使用has-selector:
ul li:has(ul), ol li:has(ol) { list-style: none; }
请注意,这并不是所有浏览器都完全支持的,但根据Caniuse(在撰写本文时覆盖率为86.19%),目前的覆盖率相当不错。
ie3xauqp5#
快速破解:删除列表项:
<ul> <li>item <li>item <ul> <li>item <li>item <li>item </ul> </ul>
如果你不关闭标签,浏览器将正确地呈现它,也就是说没有额外的项目符号。这是有效的html,因为你不需要关闭<li>标签。JSFIDDLE with both examples来源:Google
<li>
Google:如果你有一个项目列表标记为<li〉Listitem,你可以只写<li〉Listitem...
省略可选标签使您的HTML正式有效...
5条答案
按热度按时间9rnv2umw1#
你不能只在外部样式表中做到这一点(我认为你会想这样做)。原因是CSS中没有选择器可以选择那些第一个子元素是
ul
的li
元素。所以你的选择是(除了无限期地等待直到CSS有一个“parent selector“...):class
添加到这样的li
元素中,并使用类选择器。这通常是首选方法。li
元素并处理它们,例如向它们添加类。li
元素中的style
属性。moiiocjp2#
嵌套列表应该是列表项之一的子项,如下所示:
这是有效的HTML。
c3frrgcw3#
你介意我使用样式吗?Updated
验证码:
另一种方法可能是遍历LI列表并通过检测子节点添加样式。Example
代码(HTML相同):
cgvd09ve4#
在现代CSS中,你可以像这样使用has-selector:
请注意,这并不是所有浏览器都完全支持的,但根据Caniuse(在撰写本文时覆盖率为86.19%),目前的覆盖率相当不错。
ie3xauqp5#
快速破解:删除列表项:
如果你不关闭标签,浏览器将正确地呈现它,也就是说没有额外的项目符号。这是有效的html,因为你不需要关闭
<li>
标签。JSFIDDLE with both examples
来源:Google
Google:
如果你有一个项目列表标记为<li〉Listitem,你可以只写<li〉Listitem...
省略可选标签使您的HTML正式有效...