我想定义一个带有无序子列表的有序列表。您可以从下面的示例中看到我想要实现的目标。它的作用是无序列表也获得编号标签。我怎样才能防止这种情况(对于进一步的子列表[所以在级别 3,4,...] 也是如此)？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
/* %%% ordered lists, see http://stackoverflow.com/questions/2558358/how-to-add-brackets-a-to-ordered-list-compatible-in-all-browsers# %%% */
ul {
list-style-type: square;
padding: 0em 0em 0em 26px; /* indent from left */
}
ul li {
margin: 0.3em 0em 0em 0em; /* space between elements */
}
ol {
list-style-type: none;
padding: 0em; /* indent from left */
}
ol.orderedlist {
counter-reset:mycounter;
list-style-type: none;
}
ol.orderedlist li:before {
content: counter(mycounter) ") ";
counter-increment:mycounter;
}
</style>
</head>
<body>
<ol class="orderedlist">
<li>Point 1</li>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
<li>Point 2</li>
<ul>
<li>Foo</li>
<li>Bar</li>
</ul>
</ol>
</body>
</html>
最佳答案
使用子选择器:
ol.orderedlist > li:before {
content: counter(mycounter) ") ";
counter-increment:mycounter;
}
关于html - 如何调整有序列表中的元素而不影响子列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11195400/