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

Question

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

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

Answer 1

为什么要给所有的 li 上同一个类？

给 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() 伪选择 - 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; }

请注意，这在大多数旧浏览器中不起作用。