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

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

给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因为它没有得到完全支持而且它在哪里，它可能仍然是错误的。在提及其他元素或孩子方面，你最好的方法是给他们一个不同的身份，并使用它来定型。像这样：

 <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访问this page的支持浏览器列表，则其中包含一些表格，其中包含一些最受欢迎的浏览器版本及其可能带来的支持问题。

Answer 3

你需要:nth-child() btw它应该是

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

你需要使用nth-child方法。

这里的东西非常详细。希望这会对你有所帮助。

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

如何单独列出项目（具有相同的类）的样式

5 个答案: