我想知道是否有辦法改變列表中項目符號的顏色。
我有一個這樣的列表:
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>對我來說，在李的句子中插入任何東西都是不可能的，比如“span”和“p”。所以我可以用一些聰明的方法改變項目符號的顏色而不是文本的顏色嗎？
我沒有添加標記就做到了這一點，而是使用了li:before。這顯然有所有的限制:之前(沒有舊的IE支持)，但它似乎與IE8，火狐和Chrome經過一些非常有限的測試。項目符號樣式也受到unicode的限制。
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: green;
font-size: 20px;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>如果你能使用圖像，你就能做到這一點。如果沒有圖片，你就不能改變項目符號的顏色，而不能改變文本的顏色。
使用圖像
li { list-style-image: url(images/yourimage.jpg); }看見
列表樣式圖像
不使用圖像
然后，您必須編輯HTML標記，在列表中包含一個span，并用不同的顏色對li和span進行著色。
我們可以將list-style-image和SVG結合起來，我們可以在css中內聯它！這種方法提供了對& quot子彈& quot，可以變成任何東西。
要得到一個紅圈，只需使用下面的css:
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}但這僅僅是開始。這使得我們可以用這些子彈做任何瘋狂的事情。圓形或矩形很容易，但是任何你可以用svg畫的東西都可以放在那里！看看下面的靶心例子:
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/></svg>');
}
ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="0" y="0" height="10" width="10"/></svg>');
}
ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="3"/></svg>');
}
ul ul ul ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><rect fill="red" x="2" y="2" height="4" width="4"/></svg>');
}
ul.bulls-eye {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="5"/><circle fill="white" cx="5" cy="5" r="4"/><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}
ul.multi-color {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="15" height="15"><circle fill="blue" cx="6" cy="6" r="6"/><circle fill="pink" cx="6" cy="6" r="4"/><circle fill="green" cx="6" cy="6" r="2"/></svg>');
}<ul>
<li>
Big circles!
<ul>
<li>Big rectangles!</li>
<li>b
<ul>
<li>Small circles!</li>
<li>c
<ul>
<li>Small rectangles!</li>
<li>b</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>b</li>
</ul>
<ul class="bulls-eye">
<li>Bulls</li>
<li>eyes.</li>
</ul>
<ul class="multi-color">
<li>Multi</li>
<li>color</li>
</ul>基于@Marc的解決方案——由于不同的字體和瀏覽器會呈現不同的項目符號字符，所以我使用了下面的css3技術和border-radius來制作一個我可以更好控制的項目符號:
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}我知道這是一個非常非常老的問題，但是我一直在研究這個問題，并且想出了一個我沒有看到過的方法。給列表一個顏色，然后使用::first-line選擇器覆蓋文本顏色。我不是專家，所以這種方法可能有問題，我沒有發現，但它似乎很有效。
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>構建@Marc和@jessica解決方案——這是我使用的解決方案:
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}我使用em作為字體大小，所以如果你設置你的上限值為5em，它將總是被放置在你的第一行文本的中點。我使用了left:-20px，因為這是瀏覽器中項目符號的默認位置:parent padding/2
您可以使用::marker CSS偽元素來選擇列表項的標記框(即項目符號或編號)。
ul li::marker {
color: red;
}注意:在發布這個答案的時候，這被認為是實驗性的技術，并且只在Firefox和Safari中實現過(到目前為止)。
我也很喜歡Marc的回答——我需要一套不同顏色的ULs，顯然使用一個類會更容易。以下是我對橙色的使用，例如:
ul.orange {
list-style: none;
padding: 0px;
}
ul.orange > li:before {
content: '\25CF ';
font-size: 15px;
color: #F00;
margin-right: 10px;
padding: 0px;
line-height: 15px;
}另外，我發現我用于“內容:”的十六進制代碼與Marc的不同(那個十六進制圓圈似乎有點太高)。我用的那個好像正好坐在中間。我還發現了其他幾種形狀(正方形、三角形、圓形等)。)就在這里
對我來說，最好的選擇是使用CSS偽元素，因此對于光盤項目符號樣式，它看起來像這樣:
ul {
list-style-type: none;
}
li {
position: relative;
}
li:before {
content: '';
display: block;
position: absolute;
width: 5px; /* adjust to suit your needs */
height: 5px; /* adjust to suit your needs */
border-radius: 50%;
left: -15px; /* adjust to suit your needs */
top: 0.5em;
background: #f00; /* adjust to suit your needs */
}<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>基于@ddilsaver的回答。我希望能夠為子彈使用精靈。這似乎行得通:
li {
list-style: none;
position: relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}我今天試了一下，打了這個: 我需要在列表中顯示彩色標記(包括項目符號和數字)。我想到了這個技巧，并在我的樣式表中寫下了屬性的共同化:
ul,
ol {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
}
ul {}
ol {
counter-reset: li;
}
li {
padding-left: 1em;
}
ul li {}
ul li::before,
ol li::before {
color: #91be3c;
display: inline-block;
width: 1em;
}
ul li::before {
content: "\25CF";
margin: 0 0.1em 0 -1.1em;
}
ol li {
counter-increment: li;
}
ol li::before {
content: counter(li);
margin: 0 0 0 -1em;
}我選擇了一個不同的角色來顯示一個子彈，在這里觀看。我需要相應地調整邊距，也許這些值不適用于你選擇的字體(數字使用你的網絡字體)。
請嘗試使用以下方法:
ul {
color: red;
}內嵌版本，適用于Outlook桌面:
<ul style="list-style:square;">
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>JSFiddle。