如何在多行布局中选取每第4个.item元素？

嘿，这个需求很常见，咱们分两种场景来解决：

场景1：.content的子元素全是.item #

如果你的.content里面没有其他杂元素，所有子元素都是.item，那直接用CSS的:nth-child()伪类就能搞定：

.content .item:nth-child(4n) {
  /* 这里写你需要的样式，比如高亮效果 */
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

这里的4n表示从第4个元素开始，每间隔3个（也就是第4、8、12...个）选中一次，刚好对应你要的「每第4个.item」。

场景2：.content里混有其他子元素 #

如果你的.content里还包含标题、分隔符这类非.item的子元素，上面的写法就会出错（因为:nth-child是按所有子元素的顺序计数的）。这时候可以用CSS Selectors Level 4的新语法：

.content :nth-child(4n of .item) {
  /* 样式示例 */
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

这个选择器的逻辑是：先从.content的所有子元素里筛选出带.item类的元素，再从这些元素里选取每第4个，完美避开了其他杂元素的干扰~

小贴士：如果需要兼容旧浏览器（比如IE），那最好还是把非.item的元素放到.content外面，或者用场景1的写法更稳妥。

内容的提问来源于stack exchange，提问作者GMedija