根据列表元素的数量为 li first child 设置不同的边距

Question

我正在尝试根据 LI 元素的数量为 UL 中 LI 的第一个元素设置不同的 CSS 边距值。即

<ul>
 <li> (margin: 20%)
 <li>
 <li>
</ul>

<ul>
 <li> (margin: 40%)
 <li>
</ul>

尝试使用 :nth-last-child(n + 3) 但它不起作用。有什么建议么？谢谢

Answer 1

DEMO

styles can be applied to the children nodes based on the number of siblings they have.

html

<ul>
    <li>one item</li>
</ul>

<ul>
    <li>two items</li>
    <li>two items</li>
</ul>

<ul>
    <li>three items</li>
    <li>three items</li>
    <li>three items</li>
</ul>

<ul>
    <li>four items</li>
    <li>four items</li>
    <li>four items</li>
    <li>four items</li>
</ul>

css

 li:first-child:nth-last-child(1) {
    margin-left: 0px;
}

li:first-child:nth-last-child(2) ~ li {
    margin-left: 0px;
}

li:first-child:nth-last-child(3) ~ li {
    margin-left: 0px;
}

li:first-child:nth-last-child(4) ~ li {
    margin-left: 0px;
}

 li:first-child:nth-last-child(4) {
     margin-left:10px;
    color:red;
 }

 li:first-child:nth-last-child(3) {
     margin-left:20px;
    color:green;
 }

 li:first-child:nth-last-child(2) {
     margin-left:30px;
    color:blue;
 }

 li:first-child:nth-last-child(1) {
     margin-left:40px;
     color:gray;
 }

参考：Can CSS detect the number of children an element has?

根据列表元素的数量为 li first child 设置不同的边距

Setting different margin to the li first child based on the number of list elements

html

css

css-selectors

siblings