【H5 前端开发笔记】第 21 期CSS 选择器 (6) —— 兄弟选择器、否定伪类、选择器性能 详解这一期把关系型选择器的最后一块拼图补上兄弟关系再加上非常实用的否定伪类 :not()最后聊聊选择器性能的真实情况2026 年视角。一、兄弟选择器Sibling Combinators核心对比符号名称写法示例匹配规则方向典型场景特异性影响相邻兄弟选择器h2 p紧挨着前面的 h2 的第一个p 兄弟向后标题后第一段去掉上边距无额外~通用兄弟选择器h2 ~ ph2后面所有p 兄弟不限紧邻向后标题后所有段落统一缩进/样式无额外无没有前兄弟选择器—CSS 目前无法选择前面的兄弟———关键一句话CSS 只能“向后看兄弟”不能“向前看”。二、否定伪类:not():not()是逻辑否定括号里写一个或多个选择器列表CSS Selectors Level 4 后支持多参数现代浏览器已全部支持。/* 旧写法仍有效但权重较高 */li:not(.active):not(.disabled){opacity:0.6;}/* 新写法2022年后主流浏览器支持权重更合理 */li:not(.active, .disabled){opacity:0.6;}/* 常见组合 */button:not(:disabled){cursor:pointer;}a:not([href^http]){color:inherit;}/* 非外部链接 */div:not(:empty){min-height:1em;}/* 非空 div */p:not(:first-child){margin-top:1.5em;}/* 排除第一个段落的上边距 */权重Specificity重要变化面试常考:not()本身不增加特异性但括号里的选择器会正常计入特异性多参数列表时取最高那个选择器的权重而非累加/* 权重都是 0,0,1 */a:not(.external)/* a (0,0,1) */a:not(.external,.internal)/* 仍然 0,0,1取最高 *//* 旧写法权重更高 */a:not(.external):not(.internal)/* 0,0,2 */三、实战代码示例建议敲一遍!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title兄弟 :not 演示/titlestylebody{font-family:system-ui;max-width:800px;margin:3rem auto;line-height:1.6;}/* 1. 标题后紧邻的第一段 → 去掉上边距 */h2 p{margin-top:0;font-size:1.1em;}/* 2. 标题后面所有段落 → 加左边框 缩进 */h2 ~ p{padding-left:1.2rem;border-left:4px solid #4caf50;margin:1em 0;}/* 3. 排除第一个段落的上边距两种常见写法 */section p:not(:first-child){margin-top:1.5em;}/* 4. 导航非当前项变淡 */nav a:not(.current){opacity:0.6;font-weight:normal;}nav a.current{color:#d32f2f;font-weight:bold;}/* 5. 列表非空项 不是最后一个加下边框 */.features li:not(:empty):not(:last-child){border-bottom:1px dashed #ccc;padding-bottom:0.8em;margin-bottom:0.8em;}/* 6. 文章中图片后面紧跟的说明文字特殊样式 */figure figcaption{font-style:italic;color:#555;text-align:center;font-size:0.95em;margin-top:0.4em;}/* 7. 排除外部链接的小图标 */a[href]:not([href^http]):not([href^https]):not([href^/])::after{content: ↗;color:#888;font-size:0.8em;}/style/headbodyh1CSS 兄弟 :not 实战/h1sectionh2这是标题/h2p紧挨着标题的第一段 选择器生效去掉上边距/pp这是第二段~ 选择器生效有绿色左边框/pp第三段同样有左边框/p/sectionsectionh2另一个标题/h2p段落1有上边距因为不是 section 第一个 p/pp段落2/p/sectionnavahref#homeclasscurrent首页/a|ahref#about关于/a|ahref#contact联系/a/navulclassfeaturesli特性一/lili/li!-- 空 li 不显示下边框 --li特性三/lili特性四最后一个无下边框/li/ulfigureimgsrchttps://picsum.photos/600/300?random1alt示例图width600figcaption这是一张随机图片的说明文字figure figcaption 生效/figcaption/figurepahref/internal内部链接/a和ahrefhttps://external.com外部链接/a/p/body/html四、选择器性能2025-2026 真实情况总结现代浏览器Blink、WebKit、Gecko对选择器性能的优化已经非常成熟绝大多数场景下“选择器性能”已经不是瓶颈。排名由快到慢大致选择器类型示例2026 年相对耗时建议最快ID#header★★★★★首选但不要滥用极快单 class.btn★★★★☆日常主力很快标签button、属性[typebutton]★★★★常用快子选择器nav a、相邻h2 p★★★★推荐稍慢后代选择器article p★★★常用但别太深更慢通用兄弟h2 ~ p★★★适度使用明显慢:nth-child(复杂公式)、:not(复杂)★★控制数量最慢避免深层超深后代 通配*★尽量避免2026 年共识要点真正影响大的是“选择器数量” × “DOM 元素数量” × “重排/重绘频率”而非单个选择器的微秒级差距。避免从右往左想写.container .list .item而不是.item但现代引擎已优化很多。:not() 现在很安全只要里面不是超级复杂选择器性能影响已很小。兄弟选择器 / ~ 性能不错远好于深层后代。真正要优化的优先级顺序减少样式规则总量避免在动画/滚动时触发大量重计算的伪类用 class 而非复杂结构伪类做状态切换关键渲染路径LCP相关的元素尽量用 ID 或单 class下一期预告伪类下—— 交互 表单 链接状态:hover / :focus-visible / :checked / :required / :valid / :link / :visited …有想深入的场景比如 :not(:has()) 组合性能、面包屑用兄弟选择器等欢迎留言祝大家 CSS 选择器写得又准又快⚡
【H5 前端开发笔记】第 21 期：CSS 选择器 (6) 兄弟选择器、否定伪类选择器、选择器性能 详解
【H5 前端开发笔记】第 21 期CSS 选择器 (6) —— 兄弟选择器、否定伪类、选择器性能 详解这一期把关系型选择器的最后一块拼图补上兄弟关系再加上非常实用的否定伪类 :not()最后聊聊选择器性能的真实情况2026 年视角。一、兄弟选择器Sibling Combinators核心对比符号名称写法示例匹配规则方向典型场景特异性影响相邻兄弟选择器h2 p紧挨着前面的 h2 的第一个p 兄弟向后标题后第一段去掉上边距无额外~通用兄弟选择器h2 ~ ph2后面所有p 兄弟不限紧邻向后标题后所有段落统一缩进/样式无额外无没有前兄弟选择器—CSS 目前无法选择前面的兄弟———关键一句话CSS 只能“向后看兄弟”不能“向前看”。二、否定伪类:not():not()是逻辑否定括号里写一个或多个选择器列表CSS Selectors Level 4 后支持多参数现代浏览器已全部支持。/* 旧写法仍有效但权重较高 */li:not(.active):not(.disabled){opacity:0.6;}/* 新写法2022年后主流浏览器支持权重更合理 */li:not(.active, .disabled){opacity:0.6;}/* 常见组合 */button:not(:disabled){cursor:pointer;}a:not([href^http]){color:inherit;}/* 非外部链接 */div:not(:empty){min-height:1em;}/* 非空 div */p:not(:first-child){margin-top:1.5em;}/* 排除第一个段落的上边距 */权重Specificity重要变化面试常考:not()本身不增加特异性但括号里的选择器会正常计入特异性多参数列表时取最高那个选择器的权重而非累加/* 权重都是 0,0,1 */a:not(.external)/* a (0,0,1) */a:not(.external,.internal)/* 仍然 0,0,1取最高 *//* 旧写法权重更高 */a:not(.external):not(.internal)/* 0,0,2 */三、实战代码示例建议敲一遍!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title兄弟 :not 演示/titlestylebody{font-family:system-ui;max-width:800px;margin:3rem auto;line-height:1.6;}/* 1. 标题后紧邻的第一段 → 去掉上边距 */h2 p{margin-top:0;font-size:1.1em;}/* 2. 标题后面所有段落 → 加左边框 缩进 */h2 ~ p{padding-left:1.2rem;border-left:4px solid #4caf50;margin:1em 0;}/* 3. 排除第一个段落的上边距两种常见写法 */section p:not(:first-child){margin-top:1.5em;}/* 4. 导航非当前项变淡 */nav a:not(.current){opacity:0.6;font-weight:normal;}nav a.current{color:#d32f2f;font-weight:bold;}/* 5. 列表非空项 不是最后一个加下边框 */.features li:not(:empty):not(:last-child){border-bottom:1px dashed #ccc;padding-bottom:0.8em;margin-bottom:0.8em;}/* 6. 文章中图片后面紧跟的说明文字特殊样式 */figure figcaption{font-style:italic;color:#555;text-align:center;font-size:0.95em;margin-top:0.4em;}/* 7. 排除外部链接的小图标 */a[href]:not([href^http]):not([href^https]):not([href^/])::after{content: ↗;color:#888;font-size:0.8em;}/style/headbodyh1CSS 兄弟 :not 实战/h1sectionh2这是标题/h2p紧挨着标题的第一段 选择器生效去掉上边距/pp这是第二段~ 选择器生效有绿色左边框/pp第三段同样有左边框/p/sectionsectionh2另一个标题/h2p段落1有上边距因为不是 section 第一个 p/pp段落2/p/sectionnavahref#homeclasscurrent首页/a|ahref#about关于/a|ahref#contact联系/a/navulclassfeaturesli特性一/lili/li!-- 空 li 不显示下边框 --li特性三/lili特性四最后一个无下边框/li/ulfigureimgsrchttps://picsum.photos/600/300?random1alt示例图width600figcaption这是一张随机图片的说明文字figure figcaption 生效/figcaption/figurepahref/internal内部链接/a和ahrefhttps://external.com外部链接/a/p/body/html四、选择器性能2025-2026 真实情况总结现代浏览器Blink、WebKit、Gecko对选择器性能的优化已经非常成熟绝大多数场景下“选择器性能”已经不是瓶颈。排名由快到慢大致选择器类型示例2026 年相对耗时建议最快ID#header★★★★★首选但不要滥用极快单 class.btn★★★★☆日常主力很快标签button、属性[typebutton]★★★★常用快子选择器nav a、相邻h2 p★★★★推荐稍慢后代选择器article p★★★常用但别太深更慢通用兄弟h2 ~ p★★★适度使用明显慢:nth-child(复杂公式)、:not(复杂)★★控制数量最慢避免深层超深后代 通配*★尽量避免2026 年共识要点真正影响大的是“选择器数量” × “DOM 元素数量” × “重排/重绘频率”而非单个选择器的微秒级差距。避免从右往左想写.container .list .item而不是.item但现代引擎已优化很多。:not() 现在很安全只要里面不是超级复杂选择器性能影响已很小。兄弟选择器 / ~ 性能不错远好于深层后代。真正要优化的优先级顺序减少样式规则总量避免在动画/滚动时触发大量重计算的伪类用 class 而非复杂结构伪类做状态切换关键渲染路径LCP相关的元素尽量用 ID 或单 class下一期预告伪类下—— 交互 表单 链接状态:hover / :focus-visible / :checked / :required / :valid / :link / :visited …有想深入的场景比如 :not(:has()) 组合性能、面包屑用兄弟选择器等欢迎留言祝大家 CSS 选择器写得又准又快⚡
