如何单独设置列表项（具有相同类）的样式

Answer 1

为什么要给所有的李子上同一个班级？

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

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

Answer 2

我会避免使用

first-child

，因为它没有得到完全支持，而且它在哪里，可能仍然有问题。关于引用其他元素或子元素，最好的办法是给它们一个不同的 id 并使用它来设计它们的样式。像这样：

 <ul class="sameforall">
   <li id='first' >menu 1</li>
   <li id='second'>menu 2</li>
   <li id='third' >menu 3</li>
   <li id='forth' >menu 4</li> 
 </ul>

然后您可以像这样引用 css 文件中的这些元素：

#first{/*Your css*/}

如果您想查看

nth-child

的支持浏览器列表，请访问 此页面，其中包含一个表格，其中包含一些最流行的浏览器版本以及它们可能遇到的支持问题。

Answer 3

你需要 :nth-child() 顺便说一句，它应该是

ul li:fist-child

Answer 4

由于您无法更改标记，并且不支持通过 CSS 进行子选择，因此唯一的方法就是使用 JavaScript 来完成此操作。

<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>
<script type="text/javascript">
    var listItems   = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
    var numChildren = listItems.length; 
    for(var i = 0; i < numChildren; i++) {
        var item = listItems[i]; 

        // -> do whatever you want with each item.
        switch(i) {
            case 0: item.style.backgroundImage = 'url(item-1.gif);'; break;
            case 1: item.style.backgroundImage = 'url(item-2.gif);'; break;
            case 2: item.style.backgroundImage = 'url(item-3.gif);'; break;
        }            
    }
</script>

Answer 5

你需要使用第n个孩子的方法。

这里的内容很详细。希望这对您有帮助。

http://www.w3.org/TR/css3-selectors/

Answer 6

我有同样的问题，但列表是从表单输入生成的。我该如何处理无限数量的列表条目？