Question

是否可以在ul li元素上更改每个子弹图标的颜色（或者甚至只在每个图标上使用不同的图像）？所以1是绿色，2是蓝色，3是黄色等。通过CSS。

现在这是我的小清单，如果可能，我想让子弹更大。

<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

Answer 1

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 */
}

您需要为更改nth-child +1

的每个列表项执行此操作

Answer 2

如果要定义模式，则每个第三个元素都将为黄色。每个第二个子弹都是红色，然后可以使用 nth-child 伪类

来实现

#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; }

如果您想要实现不同的颜色，那么您需要提供单独的样式

UL列表 - 不同颜色的子弹

2 个答案: