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

Question

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

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

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

Answer 1

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

• 优点：几乎不需要对代码进行更改
• 缺点：不控制单个列表项，不使用有序列表（请参见选项2）

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

ul {
   list-style: none;
}

• 基本选项包括（圆盘、正方形、圆形）
• 不太基本-使用图像：ul { list-style: square inside url("sqpurple.gif");-试试看
• 另一个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"\000222"而不是"•"

或者：使用另一个符号、webding、图标字体favicon.ico图像等。

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

另一个例子：FontAwesome图标-在你开始添加后：

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

选项2-<ol>有序列表：保留原始项目编号/字母，但使用<div>或<span>将列表样式从<li>的内容样式中断

• 优点：适用于有序列表，单独或集体控制每个列表项
• 缺点：每个<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%;
}

或者使用不包含类的div或span标记进行基本操作，并在css中使用它：

ul li div {
    color: blue;
}

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