@scope不会自动以父元素为作用域根，必须配合带scope属性的真实DOM元素使用；现行规范要求选择器精确匹配该属性，如article[scope]，而.card或#user-card等类名或ID选择器单独使用无效。
@scope 在 <style></style> 标签中**不会自动以父元素为作用域根**——这种“内联即生效、省略选择器即隐式绑定”的行为根本不存在，所有声称能这样用的示例，要么依赖未公开实验 flag，要么混淆了已废弃的 scoped 属性。
为什么 @scope (.card) { } 不会匹配父元素？
现行 CSS 规范（2026 年 4 月）明确要求：@scope 第一个参数必须是**可匹配的真实 DOM 元素选择器**，且该元素必须带有 scope 或 scope-start 属性。浏览器不做任何“向上查找父元素”或“就近推断”的隐式行为。
-
@scope (.card)→ 要求 DOM 中存在<div class="card" scope>，仅靠 <code><div class="card"> <style>@scope (.card) {...}</style> 不生效 <li>写在 <code><div id="user-card"> <style>@scope (#user-card) {...}</style> 里也无效，除非该 <code><div> 真有 <code>scope属性 - DevTools 中完全看不到样式被应用的痕迹，也不会报错，规则被静默丢弃
Chrome 125+ 中能跑的最小合法写法
仅在 Chrome 125+（且未禁用 chrome://flags/#enable-css-scope）下可验证，其他浏览器（Firefox/Safari）完全不支持：
<article scope>
<h2>Title</h2>
<p>Content</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</article>
<style>
@scope (article[scope]) {
h2 { color: blue; }
:scope { border: 1px solid #ddd; }
}
</style>
- HTML 中必须有带
scope属性的真实元素（不是 class、data-*、id） - CSS 中的选择器必须精确匹配该属性，
[scope]、article[scope]、[scope-start]均可，但.card或#user-card单独写不行 -
:scope只在@scope块内部有效，且只代表那个带scope属性的根元素
常见失效场景与排查要点
写了 @scope 却没效果？大概率卡在这几个硬性条件上：
- DOM 中没有真实存在的
scope属性元素（JS 动态插入后，已解析的@scope不会重计算） - 用了
class="scope"或data-scope="true"—— 浏览器只认原生scopeattribute - 把
@scope写在里，而scope元素在底部，加载顺序导致匹配失败 - 误以为
@scope支持嵌套或 fallback 行为，实际规范不支持嵌套，也不提供降级机制
真正想让样式只作用于某个容器，目前最可靠的方式仍是：用唯一 ID/class 手动限定选择器（如 #user-card h2），或转向 Shadow DOM。别指望 @scope 在纯 HTML 中“自动绑定父元素”——它连这个能力的影子都没有。
