每八个第 n 个孩子 (8)

Question

我需要使用 nth-child 每八个元素重复一个模式。

\n\n

\xe2\x96\xa0\xe2\x96\xa1\xe2\x96\xa0\xe2\x96\xa1

\n\n

\xe2\x96\xa1\xe2\x96\xa0\xe2\x96\xa1\xe2\x96\xa0

\n\n

我一直在试图找出一个公式，但我似乎没有找到正确的方法。

\n\n

\r\n

\r\n

section {\r\n  width: 220px;\r\n}\r\ndiv {\r\n  width: 50px;\r\n  height: 50px;\r\n  float: left;\r\n  margin-right: 5px;\r\n  margin-bottom: 5px;\r\n  background-color: yellow;\r\n}\r\n\r\ndiv:nth-child(4n), div:nth-child(4n+1) {\r\n  background-color: green;\r\n}

\r\n

<section>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n  <div></div>\r\n</section>

\r\n

\r\n

\r\n

\n

Answer 1

如果您必须保留该<br>元素，那么您不想将nth-child其<br>用作子元素。相反，你可以使用nth-of-type：

div:nth-of-type(5n+1),div:nth-of-type(5n+3) {
  background-color: green;
}

例子：

div:nth-of-type(5n+1),div:nth-of-type(5n+3) {
  background-color: green;
}

div {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: yellow;
}

div:nth-of-type(5n+1),div:nth-of-type(5n+3) {
  background-color: green;
}

根据您问题中的更新信息，看起来更好的解决方案是div:nth-of-type(8n+1), div:nth-of-type(8n+3),div:nth-of-type(8n+6), div:nth-of-type(8n+8) { background-color: green; }

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <br>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

body {
  font-size: 10pt;
}

section {
  width: 220px;
}

div {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  background-color: yellow;
}

div:nth-of-type(8n+1),
div:nth-of-type(8n+3),
div:nth-of-type(8n+6),
div:nth-of-type(8n+8) {
  background-color: green;
}