如何组合:not()与nth-child选择器选中除前3项外的所有元素

问题背景 #

开发博客列表页面时遇到CSS选择器使用需求：

• 列表中前3个.blog-card元素需要应用专属独特样式
• 剩余所有.blog-card元素需要应用统一的通用样式
• 需要通过选择器跳过前3个元素，为后续博客卡片批量添加样式

初始考虑编写3条独立CSS规则实现，代码如下：

.blog-card:not(:nth-child(1)) {
    /* 通用样式 */
}

.blog-card:not(:nth-child(2)) {
    /* 通用样式 */
}

.blog-card:not(:nth-child(3)) {
    /* 通用样式 */
}

补充说明：该问题曾被标记为重复问题，此前误参考了原帖问题区的错误代码，未查看回答区的正确实现，因此产生该实现是否合理的疑问。

方案解答 #

你写的3条拆分规则无法实现需求，存在逻辑缺陷：第一条规则会命中除第1个外的所有卡片，第二条命中除第2个外的所有卡片，第三条命中除第3个外的所有卡片，最终所有卡片都会被应用通用样式，前3篇的专属样式会被干扰覆盖。

不需要写多条冗余规则，原生CSS支持单条选择器直接匹配从第4个开始的所有元素，最简洁高效的写法如下：

/* 匹配父元素下第4个及之后、class包含blog-card的子元素 */
.blog-card:nth-child(n+4) {
    /* 编写剩余博客卡片的通用样式即可 */
}

选择器逻辑说明 #

:nth-child(n+4)的计算规则中，n是从0开始递增的非负整数：

• n=0时，匹配第4个元素
• n=1时，匹配第5个元素
• n持续递增即可自动覆盖后续所有.blog-card元素
• 前3个.blog-card直接编写基础样式+专属独特样式即可，不会和上述规则冲突

如果偏好使用:not()伪类实现更直白的语义，也可以用链式写法单条规则完成，不需要拆分为3条：

.blog-card:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
    /* 通用样式 */
}

该写法和:nth-child(n+4)效果完全一致，但代码更长，日常开发优先推荐n+4的写法，更简洁易维护。

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