更改 html 列表中項目符號的顏色？
[英]Change the color of a bullet in a html list?
問題描述
我想要的只是能夠將列表中項目符號的顏色更改為淺灰色。 它默認為黑色，我不知道如何更改它。
我知道我可以只使用圖像； 如果我能幫上忙，我寧願不這樣做。
16 個解決方案
解決方案1
160 已采納 2008-09-16 20:28:38
項目符號從文本中獲取顏色。 因此，如果您想要與列表中的文本顏色不同的項目符號，則必須添加一些標記。
將列表文本包裹在一個 span 中：
<ul>
<li><span>item #1</span></li>
<li><span>item #2</span></li>
<li><span>item #3</span></li>
</ul>
然后稍微修改您的樣式規則：
li {
color: red; /* bullet color */
}
li span {
color: black; /* text color */
}
解決方案2
45 2010-11-26 21:14:16
我在沒有添加標記的情況下進行了管理，而是使用了 li:before。 這顯然具有:before所有限制（沒有舊的 IE 支持），但經過一些非常有限的測試后，它似乎適用於 IE8、Firefox 和 Chrome。 它在我們的控制器環境中工作，想知道是否有人可以檢查一下。 子彈樣式也受 unicode 內容的限制。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li {
list-style: none;
}
li:before {
/* For a round bullet */
content:'\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0px;
max-height: 0px;
left: -10px;
top: -0px;
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>
解決方案3
17 2013-04-16 15:10:03
這在 2008 年是不可能的，但很快就會成為可能（希望如此）！
根據W3C CSS3 規范，您可以完全控制在帶有::marker偽元素的列表項之前生成的任何數字、字形或其他符號。 將此應用於投票最多的答案的解決方案：
<ul>
<li>item #1</li>
<li>item #2</li>
<li>item #3</li>
</ul>
li::marker {
color: red; /* bullet color */
}
li {
color: black /* text color */
}
但請注意，截至 2016 年 7 月，此解決方案只是 W3C 工作草案的一部分，尚不適用於任何主要瀏覽器。
如果您需要此功能，請執行以下操作：
解決方案4
6 2008-09-16 20:27:05
<ul>
<li style="color: #888;"><span style="color: #000">test</span></li>
</ul>
這種方法的大問題是額外的標記。 （跨度標簽）
解決方案5
3
您好，也許這個答案來晚了，但它是實現這一目標的正確答案。
好吧，事實是你必須指定一個內部標簽，使 LIst 文本變成通常的黑色（或者你想要的任何東西）。 但是，您也可以使用 CSS 重新定義任何標簽和內部標簽。 因此，最好的方法是使用 SHORTER 標簽進行重新定義
使用此 CSS 定義：
li { color: red; }
li b { color: black; font_weight: normal; }
.c1 { color: red; }
.c2 { color: blue; }
.c3 { color: green; }
這個 html 代碼：
<ul>
<li><b>Text 1</b></li>
<li><b>Text 2</b></li>
<li><b>Text 3</b></li>
</ul>
你得到所需的結果。 您也可以使每個光盤具有不同的顏色：
<ul>
<li class="c1"><b>Text 1</b></li>
<li class="c2"><b>Text 2</b></li>
<li class="c3"><b>Text 3</b></li>
</ul>
解決方案6
2 2012-04-19 22:11:00
只需在圖形程序中做一個項目符號並使用list-style-image ：
ul {
list-style-image:url('gray-bullet.gif');
}
解決方案7
0 2013-01-05 20:34:05
如果您有很多頁面並且不需要自己編輯標記，則可以使用 Jquery。
這是一個簡單的例子：
$("li").each(function(){
var content = $(this).html();
var myDiv = $("<div />")
myDiv.css("color", "red"); //color of text.
myDiv.html(content);
$(this).html(myDiv).css("color", "yellow"); //color of bullet
});
解決方案8
0 2015-11-25 03:47:45
對於 2008 年的一個問題，我想我可能會添加一個更新的答案，說明如何更改列表中項目符號的顏色。
如果您願意使用外部庫， Font Awesome 為您提供可縮放的矢量圖標，並且當與Bootstrap 的幫助類（例如text-success ）結合使用時，您可以制作一些非常酷且可自定義的列表。
我已經擴展了下面Font Awesome 列表示例頁面的摘錄：
使用
fa-ul和fa-li可以輕松替換無序列表中的默認項目符號。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <ul class="fa-ul"> <li><i class="fa-li fa fa-circle"></i>List icons</li> <li><i class="fa-li fa fa-check-square text-success"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin text-primary"></i>as bullets</li> <li><i class="fa-li fa fa-square text-danger"></i>in lists</li> </ul>
Font Awesome （大部分）支持 IE8 ，如果您使用舊版本 3.2.1 ，則僅支持 IE7 。
解決方案9
0 2017-06-15 12:57:35
例如，如果我們為每個元素設置顏色，它也會起作用：我現在向左添加了一些邊距。
<article class="event-item">
<p>Black text here</p>
</article>
.event-item{
list-style-type: disc;
display: list-item;
color: #ff6f9a;
margin-left: 25px;
}
.event-item p {
margin: 0;
color: initial;
}
解決方案10
0
用跨度（或一些其他元素）將列表項內的文本包裹起來，並將項目符號顏色應用於列表項，並將文本顏色應用於跨度。
解決方案11
0 2008-09-16 20:29:26
解決方案12
0
<ul>
<li style="color:#ddd;"><span style="color:#000;">List Item</span></li>
</ul>
解決方案13
-1 2008-09-16 20:29:27
<ul style="color: red;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
解決方案14
-1
您可以使用 CSS 來實現這一點。 通過以您選擇的顏色和樣式指定列表，您還可以將文本指定為不同的顏色。
按照http://www.echoecho.com/csslists.htm 上的示例進行操作。
解決方案15
-2 2008-09-16 20:28:17
只需使用CSS：
<li style='color:#e0e0e0'>something</li>
解決方案16
-5 2008-09-16 20:28:01
您需要通過 CSS 設置一個“列表樣式”，並給它一個 color: 值。 例子：
ul.colored {list-style: color: green;}
如何更改 swift 中鏈接項目的 html 列表項目符號顏色？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.