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

Question

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

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

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

Answer 1

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

• 上行：几乎不需要更改代码。
• 下行：不控制单个列表项，不适用于有序列表（参见选项2）。

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

ul {
   list-style: none;
}

• 基本选项包括（光盘，方形，圆形）
• 少基础 - 使用图片：ul { list-style: square inside url("sqpurple.gif"); - try it
• 另一个img示例 - 16px Spinner项目符号（粘贴'试用'代码）：
  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”而不是“•”

或者：使用其他符号，webding，icon-font favicon.ico图片等。

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

另一个示例：FontAwesome icon - 在您get-started之后添加：

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

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

• 上行：适用于有序列表，可单独或集体控制每个列表项。
• 下行：每个<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>标记，因为它带有自己的特殊默认值。