css - 针对李元素？

Question

我有：

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

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

我不想内联。

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

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

谢谢

Answer 1

为什么不使用nth-of-type

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

如果您担心较旧的浏览器，那么有一个很棒的库可以为它们添加 CSS3 伪类。

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

编辑

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

Answer 2

您可以为所有 li 赋予类名并设置为显示块，使用浮点数。

样品小提琴：

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

Answer 3

如果你想使用纯 CSS2，你必须给它们类名。这可以通过:nth-of-type()psuedoclass 选择器来完成，但这是一个 CSS3 特性。

使用 jQuery 也很容易做到这一点（如果您想避免依赖 CSS3 但又不想将类名添加到您的标记中）。这还具有允许您根据需要动态更改宽度的优点（而不是将属性值硬编码为 CSS 类）。

Answer 4

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

Answer 5

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

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