如何更改無序列表中點的顏色？

Question

我想更改無序列表中點的顏色：

<ul>
<li></li>
</ul>

有沒有辦法用 CSS 做到這一點？ 看不到樓盤？

Answer 1

最簡單（但相當無語義）的方法是將內容包裝在span標簽中，然后將項目符號顏色應用於li並將文本顏色應用於span 。

在代碼中：

<ul>
    <li><span>text</span></li>
    <li><span>text</span></li>
    <li><span>text</span></li>
</ul>

ul li {
    /* Bullet color */
    color: red;
    list-style-type: disc;
}

ul li span {
    /* Text color */
    color: black;
}

jsFiddle 預覽

如果您無法修改 HTML，您可以使用帶有自定義顏色點的list-style-image ，或者使用生成的內容（即li:before ）並相應地着色（但要注意列表項目符號 position 問題）。

這是li:before的示例：

ul li {
    /* Text color */
    color: black;
    list-style-type: none;
}

ul li:before {
    /* Unicode bullet symbol */
    content: '\2022 ';
    /* Bullet color */
    color: red;
    padding-right: 0.5em;
}

Answer 2

進一步發展@BoltClock給出的答案：

ul li {
    color: black;
    list-style-type: none;
}

ul li:before {
    color: red;
    float: left;
    margin: 0 0 0 -1em;
    width: 1em;
    content: '\2022';
}

這樣，多行項目符號的所有行都正確縮進。 注意：我還沒有機會在 IE 上測試它！

Answer 3

以上答案都不適合我，因為我的內容包含在多行中。 然而W3C提供的解決方案是完美的： https://www.w3.org/Style/Examples/007/color-bullets.en.html

簡而言之，刪除樣式：

ul {list-style: none}

然后添加你自己的子彈

li::before {
content: "•";
color: red;
display: inline-block;
width: 1em;
margin-left: -1em
}

關鍵點是 inline-block、width 和 margin 到 position 正確。

Answer 4

您可以創建自己的圖像。

li {
    list-style-image: url(myImage.gif);
}

Answer 5

我認為您必須使用圖形：

http://catcode.com/csstips/graphic_list.html

順便說一句，這還可以讓您對子彈定位進行精細控制（通過使用邊距和圖像偏移）。