在没有jquery的情况下，每隔4个替代奇数/偶数nth-child（2n）

Question

当前情景

我想要什么

请参阅以下代码段进行修改。希望这会对你有所帮助。

ul {
    font-size: 0;
    width: 400px;
}
li {
    width: 100px;
    height: 100px;
    display: inline-block;
}
li:nth-child(odd) {
    background: yellow;
}
li:nth-child(even) {
    background: orange;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

如果可能，我需要纯CSS解决方案。

Answer 1

基本上你正在使用偏移量为8的重复组，所以你可以使用它：

ul {
    font-size: 0;
    width: 400px;
}
li {
    width: 100px;
    height: 100px;
    display: inline-block;
    background: yellow;
}
li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background: orange;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

Answer 2

啊只是做了这个并且看到了基本相同的答案 - 我使用了8n并减去了。

ul {
  width: 400px;
  padding: 0;
  margin: 0;
  position: relative;
  display: inline-block;
}
li {
  width: 100px;
  height: 55px;
  padding: 0;
  margin: 0;
  background-color: #FF8E00;
  list-style-type: none;
  text-align: center;
  display: inline-block;
  padding-top: 45px;
  font-family: Arial;
  font-size: 18px;
  font-weight: bold;
  color: #777;
}
li:nth-child(odd),
li:nth-child(8n),
li:nth-child(8n - 2) {
  background-color: #ff0;
}
li:nth-child(8n - 3),
li:nth-child(8n - 1) {
  background-color: #FF8E00;
}

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>