Css 针对李元素？

我有：

我想给每个li添加不同的宽度

我不想直接做

如何使用CSS2（而不是CSS3）针对每个li

有没有办法或者我需要给每个li一个类名

谢谢

为什么不使用

如果您担心较旧的浏览器，那么有一个很好的方法可以向它们添加CSS3伪类

唯一的CSS2方法是向每个LI添加类

编辑

---

实际上，每个LI的不同类并不是唯一的CSS2方法@Hashem Qolami对原始问题的评论有一个不错的CSS2解决方案，但正如他所说，它看起来有点傻。

如果你想使用纯CSS2，你必须给它们命名。这可以通过psuedoclass选择器

：nth-of-type（）

实现，但这是CSS3的一项功能

---

这对于jQuery来说也是非常简单的（如果您希望避免依赖CSS3，但不想将类名添加到标记中）。这还具有允许您根据需要动态更改宽度的优点（而不是将属性值硬编码为CSS类）。

通过“每个li”您是指每个li元素单独吗？如果是这样，第n个选择器可能是您的朋友，尽管它是CSS3。

您可以为所有的li指定类名，并设置为带float的display block

样本：

---

您还可以使用combcss，因为您必须为css中的每个li添加类 e:g-

---

每个

li

单独或全部相同？每个li需要不同的width@beans：它看起来很傻，但它是一个纯CSS2解决方案。在CSS2中，您可以为第二个li和on*/}li+li{/*执行

li+li{/*样式，将样式重置为默认值，使特殊样式仅适用于第二个li*/}

等操作。但是这种“穷人的第n个孩子选择器”是非常无效的。

唯一的CSS2方法是向每个LI添加类。

不正确，请查看我的评论；）只是在我发布了这个答案后才看到的。你是对的，你的解决方案是最好的方法，不改变他的HTML。你可以随时修改你的答案；）好。唯一的建议是对每个声明中的第一个li使用

li:first child

。因为它消除了不必要的CSS递归处理。当然，我们谈论的是百万分之一秒

<ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

ul li:nth-of-type(1){} /* First */
ul li:nth-of-type(2){} /* Seconds */

li{
    display:block;
    float:left;
    background:blue;
}
li.small{
        width:50%;
}
li.big{
   width:100%; 
}

li {}
li + li {}
li + li + li {}
li + li + li + li {}
li + li + li + li + li {}