在CSSselect器中，/ deep /和:: shadow是什么意思？

在查看Polymer时，我在Chrome 37的开发人员工具的“样式”选项卡中看到以下CSSselect器：

我也看到一个select器与伪select器::shadow 。

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

Answer 1

---

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

---

HTML5 Web组件提供完整的CSS样式封装。

这意味着：

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

然而，有时候您希望拥有页面级别的规则来操作在其影子DOM中定义的组件元素的表示。 为了做到这一点，你添加/deep/ CSSselect器。

因此，在所示的示例中， html /deep/ [self-end]select具有self-end属性的html （顶层）元素下的所有元素，包括隐藏在Web组件阴影DOM根目录中的元素。

如果您需要选定的元素在阴影根目录中，则可以在其父元素上使用::shadow伪select器。

考虑：

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

select器html /deep/ span将select两个<span>元素。

select器::shadow span将只select内部的<span>元素。

请阅读W3C的CSS范围模块规范了解更多。