[英]What do /deep/ and ::shadow mean in a CSS selector?
在查看Polymer时,我在Chrome 37的开发人员工具的样式选项卡中看到以下CSS选择器:
我还看到了一个带有伪选择器::shadow
选择器。
那么,CSS选择器中的/deep/
和::shadow
意味着什么呢?
正如Joel H.在评论中指出的那样,Chrome已经弃用了/deep/
combinator,并且在IE中给出了语法错误。
HTML5 Web Components提供CSS样式的完全封装。
这意味着:
但是,有时您希望使用页面级规则来操纵在其shadow DOM中定义的组件元素的表示。 为此,您将/deep/
添加到CSS选择器。
因此在所示的示例中, html /deep/ [self-end]
选择具有self-end
属性的html
(顶级)元素下的所有元素,包括那些隐藏在Web组件的shadow DOMs根中的元素。
如果您需要在阴影根中生成所选元素,则可以在其父元素上使用::shadow
伪选择器。
考虑:
<div>
<span>Outer</span>
#shadow-root
<my-component>
<span>Inner</span>
</my-component>
</div>
选择器html /deep/ span
将选择两个<span>
元素。
selector ::shadow span
将仅选择内部<span>
元素。
在W3C的CSS范围模块规范中了解更多相关信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.