使用 CSS 替换 ul 项目符号样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5454392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use CSS to alternate ul bullet point styles
提问by kevinji
I would like to alternate list-style-type properties for ul lists, so that the outer is a disc, then one inner ul list is a circle, than one more inner is a disc, and so on.
我想为 ul 列表替换 list-style-type 属性，以便外部是一个圆盘，然后一个内部 ul 列表是一个圆，然后再一个内部是一个圆盘，依此类推。
Essentially, what I want is this:
本质上，我想要的是这样的：
<ul><!-- use disc -->
<li>Lorem ipsum</li>
<li>
<ul><!-- use circle -->
<li>Lorem ipsum</li>
<li>
<ul><!-- use disc -->
<li>Lorem ipsum</li>
</ul>
</li>
<li>Lorem ipsum</li>
</ul>
</li>
<li>Lorem ipsum</li>
</ul>
How would I accomplish this using CSS?
我将如何使用 CSS 实现这一点？
回答by Matt van Andel
Like this...
像这样...
li { list-style: circle; }
li li { list-style: disc; }
li li li { list-style: square; }
And so on...
等等...
The first level of list items will have the "circle" type marker. The second (embedded) will use "discs". The third level will use squares.
列表项的第一级将具有“圆圈”类型标记。第二个（嵌入式）将使用“光盘”。第三级将使用正方形。
Simply take the above CSS and change the list-styleto suit your needs. You can find a list of list-styletypes here: http://www.w3schools.com/cssref/pr_list-style-type.asp
只需采用上述 CSS 并更改list-style以满足您的需求。您可以list-style在此处找到类型列表：http: //www.w3schools.com/cssref/pr_list-style-type.asp
回答by NyanPrime
You could use separate styles by adding classor idto the ultags:
您可以通过添加使用单独的样式class或id在ul标签：
<ul class="disk"><!-- use disk -->
<li>Lorem ipsum</li>
<li>
<ul class="circle"><!-- use circle -->
<li>Lorem ipsum</li>
<li>
<ul class="disk"><!-- use disk -->
<li>Lorem ipsum</li>
</ul>
</li>
</ul>
</li>
</ul>
.disk
{
list-style-type: disc;
}
.circle
{
list-style-type: circle;
}
Or you could add styles to uls depending on how they are nested:
或者您可以ul根据它们的嵌套方式向s添加样式：
ul
{
list-style-type:disc;
}
ul li ul
{
list-style-type:circle;
}
ul li ul li ul
{
list-style-type:disc;
}
Off the top of my head, so there might be some minor errors, but both these examples should basically work.
在我的脑海里，所以可能会有一些小错误，但是这两个例子基本上都应该有效。
回答by Hussein
It's best to give each element with different bullet type a class name.
最好为每个具有不同项目符号类型的元素指定一个类名。
<ul>
<li class="disk">test</li>
<li class="circle">test</li>
<li class="sq">test</li>
<li class="sq">test</li>
</ul>
.disk {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.sq {
list-style-type: square;
}
Check working example at http://jsfiddle.net/LWQrh/
在http://jsfiddle.net/LWQrh/检查工作示例
回答by kevinji
I have found the reason why I get double bullets. My lists are not semantically correct, so they are creating multiple bullets.
我找到了我得到双子弹的原因。我的列表在语义上不正确，因此它们创建了多个项目符号。
This is the proper HTML:
这是正确的 HTML：
<ul><!-- use disc -->
<li>Lorem ipsum
<ul><!-- use circle -->
<li>Lorem ipsum
<ul><!-- use disc -->
<li>Lorem ipsum</li>
</ul>
</li>
<li>Lorem ipsum</li>
</ul>
</li>
<li>Lorem ipsum</li>
</ul>
With the fixed code, the solutions above work.
使用固定代码，上述解决方案有效。
回答by shortstuffsushi
The simple answer to this one is no, it cannot be accomplished through CSS in a consistent manner.
对这个问题的简单回答是否定的，它不能通过 CSS 以一致的方式完成。
You could write some javascript to parse through the page and basically maintain a stack of ULs, but it would be kind of sloppy and hackish. It'd have to be something like this.
您可以编写一些 javascript 来解析页面并基本上维护一堆 UL，但这会有点草率和黑客。它必须是这样的。
function doStyle(htmlBlock, depth)
var returnHtml = '';
// While the HTML block presented has UL tags within it
while(htmlBlock.indexOf('<ul>') > 0) {
// Take all the content up to the next/first <UL>
returnHtml += htmlBlock.substring(0, htmlBlock.indexOf('<ul>'));
// Add a styled <UL>, alternating on depth
returnHtml += '<ul class="' + (depth % 2 == 0 ? 'square' : 'circle') + '">';
// Recurse on the content inside that UL, using depth + 1
returnHtml += doStyle(htmlBlock.substring(htmlBlock.indexOf('<ul>'), htmlBlock.indexOf('</ul>')), depth + 1);
// Close the <UL>
returnHtml += '</ul>';
// Pull the whole UL block out of the remaining string
htmlBlock = htmlBlock.substring(htmlBlock.indexOf('</ul>') + 5);
}
// Return the built up string,
// And whatever is left of the original HTML block
return returnHtml + htmlBlock;
}
