使用第n个边距链接

Question

如果我有9 li并且我需要2, 3, 5, 6, 8, 9 to be margin-left: 20px;，我该怎么写这个公式？

.mySheet li:nth-child(What Goes Here???) {
    margin-left: 20px;
}

Answer 1

nth-child（N）其中N是元素的顺序

即

<li>test</li>
<li>test2</li>
<li>test3</li>

<style>li:nth-child(2) { color: red; }</style>

在上面的例子中，第二个li会有红色文字。

你也可以指定增量，但它比上面的例子稍微复杂一点......即如果我希望每个第三个li都有一个特定的风格：

<style>li:nth-child(3n+1) { color: red; }</style>

Answer 2

我愿意：li:nth-child(3n-2)包括第一个li（不是margin-left）任何其他人都会margin-left :)。

DEMO

基本上：

li {
 margin-left:20px;
}
li:nth-child(3n-2) {
  margin:0;
}

---

如果你更喜欢它，那就是：

li:nth-child(3n), li:nth-child(3n-1) {
 margin-left:20px;
}

li {
  margin:0;
}

<强> DEMO

---

所以我会选择第一个，更短。