最後，很容易更改列表子彈的顏色

在我發芽的幾年中，一般的建議是：

• 列表項目

 li {顏色：紅色; } / *子彈 * /
li跨度{顏色：黑色; } /* 文本 */

並不可怕，但不是很好。您正在“重置”跨度級別的所有內容，因此您做的越多，它就會變得更加複雜。

事情變得越來越容易。讓我們漫步在這個世界上，隨著我們的發展而變得更加現代。

另一種選擇是刪除默認列表樣式並用偽元素替換。

 ul {
  列表風格：無；
}

li :: {
  內容： ”• ”;
  顏色：紅色；
}

如果需要計算，我們可以使用CSS計數器來做到這一點。

 ol {
  列表風格：無；
  反靜音：my-Awone-counter；
}

oli {
  反插入：My-Awone-Counter；
}

ol li :: {
  內容：計數器（My-Awone-counter）”。
  顏色：紅色；
}

在這裡快速旁邊：這無助於顏色，但是您可以通過設置字符串來指定用於子彈的字符，例如：

 ul {
  列表式型：'✽';
}

這是Firefox 39（2015）和Chrome 79（2019年12月9日）。

對於有序列表，有大量特定語言的選項。這些語言風格也適用於CSS計數器，您可以在Hui Jing的深入潛水中了解更多信息。

但是，一直以來，我們只想選擇愚蠢的子彈（或任何東西）並進行樣式。現在，我們開始能夠做到這一點。

從Firefox 68（2019年7月）開始，您可以喜歡：

 Li :: Marker {
  顏色：紅色；
  內容：“►”；
}

……如您所見，這絕對是最乾淨，最簡單的方法，它改變了顏色和子彈事物，因此很高興看到進度。

Tejas證明：

ManuelMatuzović指出，如果您將元素設置為列表信息顯示類型，則也可以在其上使用標記。

 H2 {
  顯示：列表項目；
}

H2 :: Marker {
  顏色：橙色；
  內容：“☞”；
}

即使在撰寫本文時，野生動物園也得到了支持，因此我們應該在這裡依靠Chrome。

此瀏覽器支持數據來自Caniuse，其中有更多詳細信息。一個數字表明瀏覽器在該版本及以上支持該功能。

桌面

移動 /平板電腦

以上是最後，很容易更改列表子彈的顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章！