CSS中没有layered选择器，所谓“层叠”实为特异性、声明顺序和!important共同作用的结果；@layer是用于控制样式优先级的层叠规则，而非选择器。
CSS 里没有叫 layered 的选择器，也不存在 layered 这个关键字或语法。你遇到的可能是对「层叠（cascade）」概念的误解，或是把 CSS @layer 规则、嵌套选择器、后代选择器等混淆成了某种“layered selector”。
下面直接说清楚几个真正相关、容易搞混的技术点：
后代选择器不是 layered，但常被误认为“分层”
像 .header .nav a 这种写法叫后代选择器（descendant combinator），它匹配的是嵌套在 .header 内部、再内部的 .nav 中的 a 元素。它不创建新层，只是基于 DOM 结构做匹配。
- 层级越深，选择器特异性（specificity）不一定越高 ——
div a的特异性仍低于.btn - 过度嵌套（如
.layout .main .content .item a）会让样式难以维护，也容易被更具体的选择器覆盖 - 现代 CSS 推荐用 BEM 或原子类，减少深度依赖
@layer 是真正的层（layer），但和选择器无关
@layer 是 CSS 新增的层叠控制机制（CSS Cascading and Inheritance Level 5），用于显式声明样式的优先级顺序，解决「谁该后加载、谁该被覆盖」的问题。
立即学习“前端免费学习笔记（深入）”；
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
body { font-family: sans-serif; }
}
@layer components {
.button { background: blue; }
}-
@layer声明本身不选元素，只定义层名和加载顺序 - 层内规则按声明顺序层叠，不同层之间按
@layer出现顺序决定优先级（后声明的层优先级更高） - 未归入任何
@layer的样式属于anonymous layer，优先级低于所有已命名层 - 注意浏览器兼容性：Chrome 110+、Firefox 119+、Safari 17.4+ 支持；旧版需回退到
!important或调整引入顺序
选择器特异性（specificity）才是影响“层叠效果”的核心
所谓“层叠样式效果”，实际由浏览器按特异性 + 声明顺序 + 重要性（!important）三者共同决定。特异性不是“层数”，而是加权计分：
-
style属性：1000 分 - 每个 ID 选择器（如
#app）：100 分 - 每个类/属性/伪类（如
.cls,[type="text"],:hover）：10 分 - 每个标签/伪元素（如
div,::before）：1 分 - 逗号分隔的多个选择器中，取最高特异性项参与比较
例如：div#main.content:hover 特异性是 112（100 + 10 + 1 + 1），而 .sidebar a 是 21（10 + 10 + 1）——前者会覆盖后者，哪怕后者写在后面。
真正想实现“样式分层管理”，推荐组合方案
不用硬造 layered 选择器，而是用现代 CSS 工程化思路组织：
- 用
@layer划分语义层（reset / base / theme / components / overrides） - 组件内用低特异性选择器（如
.card,.card__title），避免用div.card h2这类高依赖结构的写法 - 通过构建工具（如 PostCSS、Vite）自动合并并排序
@layer块，确保生产环境层序正确 - 调试时用浏览器 DevTools 的 Styles 面板看“strike-through”样式，确认哪条规则赢了层叠计算
CSS 的层叠逻辑是隐式发生的，没有“layered selector”这种东西。真正要控制样式生效顺序，靠的是理解特异性、合理使用 @layer、以及避免无意义的嵌套选择器。最容易被忽略的一点：即使用了 @layer，如果某一层里写了 !important，它依然会打破层序 —— 层叠规则里，!important 永远比层名优先级更高。
