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

在查看Polymer时，我在Chrome 37开发人员工具的“样式”标签中看到以下CSS选择器：

我也看到了带有伪选择器的选择器::shadow。

那么，是什么做的/deep/和::shadowCSS选择意味着什么？

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

HTML5 Web组件提供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作用域模块规范中阅读有关此内容的更多信息。