【发布时间】：2017-01-18 17:37:55
【问题描述】：
我试图覆盖 HTML 中有序和无序列表的分层排列中的项目符号，嵌套任意深度，但仅限于某些项目。这个问题的嵌套部分很重要，因为浏览器会根据列表的深度为列表分配不同的项目符号，因此对未选中/未选中/等的项目使用静态覆盖不是一种选择。
我已将a JSFiddle outlining this issue 放在一起，代码如下，以防 JSFiddle 不可用。在小提琴中，名为“noncheck”的项目应该具有默认的项目符号样式。
HTML：
<ul>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
<li>
<div><div class="checkbox"><div class="check"></div></div>checked</div>
</li>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checkbox"><div class="check"></div></div>checked</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<ul>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
<li>
<div><div class="checkbox"><div class="check"></div></div>checked</div>
</li>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checkbox"></div>unchecked</div>
</li>
<li>
<div><div class="checkbox"><div class="check"></div></div>checked</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x"></div></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<div><div class="checkbox"><div class="x2"></div></div>x</div>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
</ul>
</li>
<li>
<div><div class="checked"></div>noncheck</div>
</li>
</ul>
CSS：
ul {
list-style: none;
margin-left: 0;
padding-left: 19px;
}
li {
text-indent: -19px;
position: relative;
left: 38px;
margin-right: 38px;
}
.checkbox {
border: 1px solid black;
width: 11px;
height: 11px;
display: inline-block;
margin-right: 5px;
margin-top: 2px;
margin-bottom: -1px;
position: relative;
top: 1px;
}
.checkbox > .check {
border: 0px;
margin: -11px 0px 0px 18px;
padding: 0px;
display: block;
font-size: 20px;
}
.checkbox > .check:before {
content: '✔';
color: #000000;
}
.checkbox > .x {
border: 0px;
margin: -3px 0px 0px 19px;
padding: 0px 0px 0px 0px;
display: block;
font-size: 13px;
position: relative;
top: -1px;
}
.checkbox > .x:before {
content: '✖';
color: #000000;
}
.checkbox > .x2 {
border: 0px;
margin: -6px 0px 0px 18px;
padding: 0px 0px 0px 0px;
display: block;
font-size: 16px;
}
.checkbox > .x2:before {
content: '✕';
color: #000000;
}
【问题讨论】：
-
如果我理解正确，您希望那些包含
div.checkbox的列表项没有项目符号，而没有项目符号的列表项正常运行？ CSS 不允许这样做，抱歉。您将不得不重新考虑您的策略，例如以将类分配给列表项本身的形式。 -
对不起，我应该补充一下这是程序生成的，
<div class="checkbox">组件完全是任意的。我想要做的是对某些项目子集使用内置的浏览器项目符号样式（以某种方式标记它们以被生成HTML的代码识别很好，但是跟踪它们在哪个级别以及哪个级别浏览器不会。）如果您查看this fiddle，您应该会注意到不同深度的项目符号略有不同 - 这就是我试图为任意选择的项目保留的项目。 -
你走错路了。不要把子弹藏在每一个里，然后试着把它们恢复到它们只为一些里的样子。 保留每个li上的子弹，然后在应该隐藏的时候隐藏。就像我说的那样，将类分配给应该隐藏其项目符号的列表项，并使用 css 仅隐藏这些列表项上的项目符号。无需跟踪它们所在的嵌套级别！
-
如何在不使用父
<ul>中的list-style: none;选项的情况下根据<li>隐藏它们？当我尝试在它们上绘制复选框时，我最终会出现重叠的项目符号，并且肯定不希望为框设置背景颜色，因为这是我在生成 HTML 和 CSS 时不知道的值。 -
不要将
list-style分配给ul；仅将其分配给适当的li元素。ul本身的list-style属性不做任何事情，但它被列表项继承以生成项目符号。请参阅official definition。
标签： html css html-lists