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

Question

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

3

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

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

- Tom

5个回答

1

我会避免使用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 的浏览器列表，请访问this page，其中包含一张表格，列出了一些最流行的浏览器版本以及它们可能存在的支持问题。

- Juan Cortés

当你可以将同一个类放在<ul>上时，就没有必要在每个<li>上都放置相同的类。 - theorise

0

由于您无法更改标记并且通过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>

- Alex

谢谢 JavaScript，不幸的是我也不能添加 JS。 - Tom

0

你需要使用:nth-child()，顺便提一下应该是这样的

ul li:fist-child

- antpaw

0

你需要使用nth-child方法。

这里的内容已经详细说明了。希望能对你有所帮助。

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

- Wind Chimez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- theorise · Accepted Answer

为什么要给所有的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; }

注意，这在大多数旧浏览器中无法使用。