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

在查看聚合物时，我在 Chrome 37开发工具的 斯泰尔斯选项卡中看到以下 CSS 选择器:

enter image description here

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

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

102146 次浏览
小开

正如 Joel H. 在评论中指出的那样，Chrome 已经废弃了 /deep/组合码，并且在 IE 中出现了语法错误。

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

这意味着:

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

但是，有时候您希望使用页面级规则来操作在其影子 DOM 中定义的组件元素的表示。为此，需要将 /deep/添加到 CSS 选择器。

所以在示例中，html /deep/ [self-end]选择了 html(顶层)元素下所有具有 self-end属性的元素，包括那些隐藏在 web 组件的 Shadow 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 作用域模块规范中阅读更多关于这方面的内容。


提交答案