/ deep /和:: shadow在CSS选择器中的含义是什么？

Question

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

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

那么,是什么做的/deep/和::shadowCSS选择呢？

Answer 1

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

HTML5 Web Components提供CSS样式的完全封装.

这意味着:

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

但是,有时您希望使用页面级规则来操纵在其shadow 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范围模块规范中了解更多相关信息.