针对li元素？

Question

我有：

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

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

我不想内联。

如何使用CSS2（而不是CSS3）定位每个li？

有没有办法或者我需要给每个人一个班级名字吗？

由于

Answer 1

为什么不使用nth-of-type

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

如果你担心旧的浏览器，那么有一个很棒的library可以为他们添加CSS3伪类。

唯一的CSS2方式是为每个LI添加类。

修改

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

Answer 2

如果你想使用纯CSS2，你必须给它们类名。这可以通过:nth-of-type()伪造的选择器来实现，但这是一个CSS3功能。

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

Answer 3

“每个li”你的意思是每个li元素单独？如果是这样，第n个选择器可能是你的朋友，虽然它是CSS3。

Answer 4

您可以为所有li提供类名，并设置为display block，使用float。

示例fiddle：

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

Answer 5

你也可以使用comb css，因为你必须为CSS中的每个li添加类 e：g-

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