Question

我有html：

HTML

<li>
   <a>Title</a>
(0)
</li>

CSS

li {
   visibility:collapse;
}
li a {
   visibility:visible;
}

CSS有效并隐藏＆＃34; 0＆＃34;超出标签。

问题是，style之后li的列表visibility:collapse没有回来;

我如何设置列表样式的位置？

添加到标记列表样式并不能很好地工作，因为它使列表样式的项目符号成为链接本身。

我只能访问style.css，因此无法在0周围添加范围。

Answer 1

问题是你要折叠所有列表，所以你要隐藏它的样式。

解决方案可以是将元素放入跨度并将其折叠。

<li>
   <a>Title</a>
    <span class='collapse'>(0)</span>
</li>

li .collapse{
   visibility:collapse;
}

https://jsfiddle.net/jb0yzewt/2/

Answer 2

如何使用:before的伪li元素。这样的事情。

li.fake {
  visibility:collapse;

}
li.fake:before {
  content: '\2022';
  visibility:visible;
  font-size: 1.4em;
  vertical-align: sub;
  margin: 0 3px 0 -15px

}

li a {
  visibility:visible;
}

<li class="fake">
   <a href="">Title</a>
(0)
</li>

<li class="real">
   <a href="">Title</a>
</li>

Answer 3

编辑（新答案）：

您的编辑让我更了解您的愿望。要将列表样式恢复为a元素，请如何应用

display: list-item;
list-style-type: disc;

到“a” - 元素？

旧答案（取回“0”）：

“0”被隐藏，因为它里面的li不是a元素。为了使其可见，您必须将“0”放在另一个标记中，例如。

您可以将其插入“a”元素并应用

"pointer-events: none;"

这样做会阻止用户点击该元素。请记住，并非所有浏览器都支持此功能。

为了使其更加灵活，以便您不必在标记中包含数字我会建议使用伪元素。

    body { 
/* ideally you want to initialize the counter on the parent element of your li elements. */
    counter-reset: listElementCounter;
}

li {
    counter-increment: listElementCounter;   /* increment the counter for every li */  
}

    li::after {
        content: counter(listElementCounter); /* output the Number */
        visibility: visible;
    }

将列表样式添加回li标签提供可见性：collapse;

3 个答案:

编辑（新答案）：

旧答案（取回“0”）：