2026年【H5 前端开发笔记】第 21 期：CSS 选择器 (6) 兄弟选择器、否定伪类选择器、选择器性能详解

科技前沿 • 2026-03-20 11:40 • 阅读 0

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

 
 
   
    
  
    兄弟 + :not 演示

GPT plus 代充 只需 145body { 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; }

CSS 兄弟 & :not 实战

这是标题

紧挨着标题的第一段（+ 选择器生效，去掉上边距）

这是第二段（~ 选择器生效，有绿色左边框）

第三段同样有左边框

另一个标题

段落1（有上边距，因为不是 section 第一个 p）

段落2

特性一
特性三
特性四（最后一个，无下边框）

内部链接" target="_blank">https://yingjuxia.com/archives/"/internal">内部链接和外部链接

" target="_blank">https://external.com">外部链接

2026年【H5 前端开发笔记】第 21 期：CSS 选择器 (6) 兄弟选择器、否定伪类选择器、选择器性能 详解

CSS 兄弟 & :not 实战

这是标题

另一个标题

相关推荐

2026年【H5 前端开发笔记】第 21 期：CSS 选择器 (6) 兄弟选择器、否定伪类选择器、选择器性能详解