Question

我想从列表中选择每个第3和第4个列表项，我尝试了以下但它似乎无法可靠地工作。

.ty-subcategories__item:nth-child(2n+1) .ty-btn,
.ty-subcategories__item:nth-child(3n+1) .ty-btn,

一定是做错了，任何人都有更好的解决方案吗？

Answer 1

如果你想从4组中选择第3和第4项，那么你需要这样做：

＆＃13;

li:nth-child(4n+3),
li:nth-child(4n+4) {
  background-color: palegoldenrod;
}

＆＃13;

<ol>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ol>

＆＃13;

Answer 2

您的风格中的+1不是必需的。 3n和4n工作得很好：

＆＃13;

ul li:nth-child(3n) {background:red}
ul li:nth-child(4n) {background:blue}

＆＃13;

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

＆＃13;

注意，这意味着每隔3 li为红色，每4 li为蓝色。如果它们都落在同一li上，那么它将是蓝色的，因为它是最新定义的。

如果这不是您想要的结果，请解释。

从列表中选择每个第3和第4项

2 个答案: