#优质博文 #CSS #前端
The Hidden Selectors of The HTML Element

AI 摘要：本文来自 Temani Afif 的 CSS 小贴士系列，介绍了除 html {} 与 :root {} 外，还能选中 <html> 元素的几种“隐藏”选择器，如嵌套选择器 &、:scope、:has()、:not() 等，并通过组合操作符展示了多种有趣写法。虽然这些技巧在实际开发中不一定实用，但它们揭示了 CSS Selector 机制的底层逻辑与灵活性，是一次颇具趣味性的语法探索。

[以下是方便搜索索引的大纲（AI 生成），请读原文]
1. 根元素的经典选择方式
• 介绍了我们熟知的两种方式：html {} 与 :root {}
• 提出问题：是否存在其他隐藏选择器可用于选中 <html> 元素

2. 嵌套选择器（Nesting Selector &）
• 在非嵌套上下文中，& 等效于 :scope
• 可直接用作选择 <html> 元素

3. :scope 选择器
• 当没有定义作用域根节点时，:scope 默认代表整个文档根，即 <html>
• 示例代码展示了如何直接使用 :scope { ... } 来作用于全页面样式

4. :has() 选择器的新奇用法
• <html> 是唯一同时包含 head 与 body 的元素，可利用结构特征进行反向匹配
• 示例：:has(head) 或 :has(body) 都能命中 <html>

5. :not() 与组合筛选
• <html> 是唯一没有父节点的元素，可利用 `:not(* *)`（排除有祖先的元素）进行匹配
• 加入子代组合符 > 可形成如 :not(* > *) 的结构，用“CSS 符号表情”形式趣味收尾

6. 组合选择器的实验与调侃
• 展示 :is() 、:where() 与多重 & 的奇怪组合写法（如 &&&&）
• 指出这些写法在逻辑上可行但缺乏实际用途，更多是对 CSS Selector 灵活性的探索

7. 结语与扩展阅读
• 作者认为这些“隐藏选择器”是有趣但不实用的实验
• 附带更多 CSS Tips，如 Direction-Aware CSS Shapes 与 Direction-Aware Arrow Shape using corner-shape，扩展了方向感知样式的应用视角


author Temani Afif
Css-Tip
The Hidden Selectors of The HTML Element
The Hidden Selectors of The HTML Element
Discover alternative selectors for the html element beyond the classic `:root{}` and `html{}`
 
 
Back to Top