css – 如何单独设置列表项(具有相同的类)的样式

请帮我设置这个列表的样式,我需要为每个列表项设置不同的背景图像,但是类是相同的.

<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>

我知道这一个,但它只适用于拳头项目:(

ul:first-child li{
/*my css*/
}

你为什么要给所有李同一个班级？

给ul一个类来设置包含li的样式,然后给li自己的类,就像这样：

<ul class="sameforall">
   <li class="one">menu 1</li>
   <li class="two">menu 2</li>
   <li class="three">menu 3</li>
   <li class="four">menu 4</li>
</ul>

.sameforall {color: red;}
   .sameforall .one {background-color: blue;}
   .sameforall .two {background-color: green;}
   .sameforall .three {background-color: pink;}
   .sameforall .four {background-color: purple;}

你无法访问HTML,CSS3支持：nth-​​child()psuedo选择 – http://css-tricks.com/how-nth-child-works/

<ul>
   <li class="sameforall">menu 1</li>
   <li class="sameforall">menu 2</li>
   <li class="sameforall">menu 3</li>
   <li class="sameforall">menu 4</li>
</ul>

.sameforall:nth-child(1) { background-color: blue; }
.sameforall:nth-child(2) { background-color: green; }
.sameforall:nth-child(3) { background-color: pink; }
.sameforall:nth-child(4) { background-color: purple; }

请注意,这在大多数旧版浏览器中都不起作用.