/deep/ 和 ::shadow 在 CSS 选择器中是啥意思？

Posted 2023-02-19

【中文标题】/deep/ 和 ::shadow 在 CSS 选择器中是啥意思？

【英文标题】：What do /deep/ and ::shadow mean in a CSS selector?/deep/ 和 ::shadow 在 CSS 选择器中是什么意思？

【发布时间】：2014-10-25 21:49:26

【问题描述】：

在查看 Polymer 时，我在 Chrome 37 的开发者工具的 Styles 选项卡中看到了以下 CSS 选择器：

我还看到了一个带有伪选择器::shadow的选择器。

那么，CSS 选择器中的/deep/ 和::shadow 是什么意思？

【问题讨论】：

Related: What is the ::content pseudo-element and how does it work? 不建议当骗子，虽然我相信那里的答案更全面，但这里的问答较早发布，答案也很好。

【参考方案1】：

---

正如 Joel H. 在 cmets 中指出的那样，Chrome 已经弃用了 /deep/ 组合器，并且它在 IE 中出现了语法错误。

---

html5 Web Components 提供对 CSS 样式的完全封装。

这意味着：

在组件中定义的样式不能泄漏并影响页面的其余部分 在页面级别定义的样式不会修改组件自己的样式

但是，有时您希望使用页面级规则来操作在其影子 DOM 中定义的组件元素的表示。为此，您将 /deep/ 添加到 CSS 选择器。

因此，在所示示例中，html /deep/ [self-end] 正在选择 html（***）元素下具有 self-end 属性的所有元素，包括那些隐藏在 Web 组件的影子 DOM 根中的元素。

如果您要求选定元素位于影子根中，则可以在其父元素上使用::shadow 伪选择器。

考虑：

<div>
  <span>Outer</span>
  #shadow-root
  <my-component>
    <span>Inner</span>
  </my-component>
</div>

选择器html /deep/ span 将同时选择<span> 元素。

选择器::shadow span 将仅选择内部<span> 元素。

在 W3C 的 CSS Scoping Module 规范中了解更多信息。

【讨论】：

@NicoO，很有趣。我刚刚玩了一点你的 jsfiddle（昨晚当你发表评论时，该网站对我来说已关闭），我似乎无法让 ::shadow 伪选择器为用户代理的影子 DOM 工作。不过使用/deep/ 确实有效。

@NicoO 似乎不再适用于 chrome...标准已更改，因此 >>> is the new /deep/ combinator。而且这也不针对shadow dom。

请注意，在 2015-2016 年左右，/deep/ 组合器已被 Chrome 弃用。此外，在 IE 中使用它会出现语法错误。

:shadow 也被弃用了

有趣的阅读：The New Angular ::ng-deep and the Shadow-Piercing Combinators Drop