UL列表 - 不同顏色的子彈

是否可以更改ul li元素上每個單獨的子彈圖標的顏色（或者甚至只是使用不同的圖像）？所以1是綠色，2是藍色，3是黃色等通過CSS。UL列表 - 不同顏色的子彈

這裏是我的小列表，如果可能的話，我想讓子彈變大。

<nav class="navigation-list"> 
    <ul> 
     <li><a href="/" class="active">home</a></li> 
     <li><a href="/About-Us" >about us</a></li> 
     <li><a href="/Products" >products</a></li> 
     <li><a href="/Contact-Us" >contact us</a></li> 
     </ul> 
</nav>

CSS

#header .navigation-list { 
    float: left; 
} 
#header .navigation-list ul { 
    margin-top: 38px; 
} 
#header .navigation-list ul li { 
    display: inline; 
    list-style-type: none; 
    padding: 0 25px; 
    font-family: newsgoth_btbold; 
    font-size: 12px; 
}

這是我後：http://tinypic.com/r/11ux6xk/8

來源

2014-03-05 JordanC26

只需添加一個不同'每個李'的顏色。 –

Paulie_D說了什麼。 [** DEMO **]（http://jsfiddle.net/Ruddy/rFW8d/1/） – Ruddy

你不能自動循環遍歷顏色範圍（我認爲這是問題的目的），但你可以肯定將特定顏色分配給特定列表項目的項目符號。 –

ul{ 
    list-style-type: none; 
    list-style-position: outside; 
    list-style-image: none; 
} 

li:before { 
    content: "• "; 
} 


.navigation-list ul li:nth-child(1){ 
    color: red; /* or whatever color you prefer */ 
} 

.navigation-list ul li:nth-child(2){ 
    color: blue; /* or whatever color you prefer */ 
}

您將需要爲每個列表項改變第n個孩子+1

的做到這一點

來源

2014-03-05 11:20:56

有沒有辦法增加子彈的大小呢？ – JordanC26

@ JordanC26使用'font-size'。 –

當然，@Mr_Green是正確的。這是因爲您使用文本來添加項目符號點。您可以像操作CSS中的文本一樣操作它。字體大小，文字修飾你的名字。 –

如果你正在定義一個模式，每個第三個元素都是黃色的。每一秒的子彈會變成紅色，然後可以使用第n個孩子僞類

#header .navigation-list ul li:nth-child(3n) { color:green; } 
#header .navigation-list ul li:nth-child(3n+1) { color:blue; } 
#header .navigation-list ul li:nth-child(3n+2) { color:yellow; }

如果要實現不同不同顏色的實現，那麼你需要給個人風格

來源

2014-03-05 11:21:37

這也會改變段落的顏色。您需要更改a屬性的樣式： li a {color：＃000;} –

請記住，IE8或以下版本不支持['：nth-child']（http://caniuse.com/ ＃搜索=第n個孩子） –

UL列表 - 不同顏色的子彈

回答

相關問題