css - CSS 选择器中的/deep/and::shadow 是什么意思？

Question

在查看 Polymer 时，我在 Chrome 37 开发人员工具的样式选项卡中看到以下 CSS 选择器:

我还见过一个带有伪选择器 ::shadow 的选择器。

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

Answer 1

---

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

---

HTML5 Web Components 提供对 CSS 样式的完整封装。

这意味着:

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

然而，有时您希望使用页面级规则来操纵在影子 DOM 中定义的组件元素的呈现。为此，您添加 /deep/到 CSS 选择器。

因此在所示示例中，html /deep/ [self-end]正在选择 html 下的所有元素(顶级)元素具有 self-end属性，包括那些隐藏在网络组件的影子 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 中阅读更多相关信息规范。