完全控制 css 中的列表项项目符号 - 有序列表和无序列表

Question

如何更改 <ol> 或 <ul> 列表项目符号的颜色/大小/显示字符，同时保持对列表项其余部分的单独控制？

解决方案应处理对两种列表类型的更改。

p.s。我在这个问题上看到了一些密切相关的问题，并想为一般问题提供一个包容性的解决方案（两个主要变体）。

Answer 1

选项 1 - <ul> 无序列表：用你自己的替换原始项目符号

优点：几乎不需要更改代码。
缺点：无法控制 div 双重列表项，不适用于有序列表（参见选项 2）。

步骤 1. 首先删除现有的列表项目符号：

ul {
   list-style: none;
}

基本选项包括（圆盘、方形、圆形）
Less Basic - 使用图像：ul { list-style: square inside url("sqpurple.gif"); - try it
另一个 img 示例 - 16px Spinner 项目符号（粘贴在 'try it' 代码中）：
list-style: square inside url("http://agroportal.lirmm.fr/assets/spinners/spinner_000000_16px-4f45a5c270658c15e01139159c3bfca130a7db43c921af9fe77dc0cce05132bf.gif");

步骤2.在列表项信息前添加替换：

ul li:before {
       content: "•";        // change what you like
                            // 'before' does not change li styles

       font-size: 150%;     // a few options
       padding-right: 5px;
       color: blue;
    }

注意：最好使用 Unicode "\002022" 而不是 "•"

或者：使用其他符号、网页、图标字体favicon.ico图像等

ul li:before {
       content: "4"; font-family:"Webdings";
    }

另一个例子：FontAwesome icon - after you get-started 添加：

content: "<i class="fa fa-check-circle"></i>" // fontawesome API

选项 2 - <ol> 有序列表：保留原始项目编号/字母但使用 <div> 或 [打破 <li> 的内容样式的列表样式=23=]

优点：适用于有序列表，可以单独或共同控制div中的每个列表项。
缺点：每个 <li> 的标签，较少的项目符号控制。

HTML

<ol class="ol--bullet-style">
  <li><div class="li--default">Foo</div></li>
  <li><div class="li--default">Foo</div></li>
  <li><div class="li--default">Foo</div></li>
</ol>

CSS:

.ol--bullet-style {
    color: red;          // some options
    font-size: 150%;
    font-decoration: underline;
    font-family: Courier New;
}

.li--default {
    font-family: Garamond;
    font-size: 100%;
}

或者使用不包含 class 的 div 或 span 标签作为基础，并在您的 css:

中使用它

ul li div {
    color: blue;
}

注意：不推荐使用 <p> 标签，因为它有自己的特殊默认值。

完全控制 css 中的列表项项目符号 - 有序列表和无序列表

Full control of list item bullets in css - ordered and unordered lists

html

css

html-lists

listitem