Home / Questions / 88419
Accepted
dddenis
Asked: 2020-07-21 11:39:47 +0800 CST 2020-07-21 11:39:47 +0800 CST

CSS 中的 /deep/ 选择器到底是什么？

  • 772

我一直在研究选择器/deep/，因为我不得不使用该选择器强行修改来自谷歌材料设计库的输入的样式。

我发现它是用来封装组件的样式的，这样它们就不会超出页面，但是我找不到一个清晰的例子来正确理解它。

  1. 它是什么/deep/？

  2. 它是干什么用的？

  3. 问题？例如：兼容性。

css

2 Answers

  1. Best Answer

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

    这意味着：

    • 组件中定义的样式不能突破并影响页面的其余部分
    • 在页面级别定义的样式不会覆盖组件自己的样式

    然而，有时需要有页面级规则来操作在其影子 DOM 中定义的组件元素的显示。为此，它被添加/deep/到 CSS 选择器中。

    /deep/因此是一个组合子。

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

    也许w3.org 文档，在第 3.2.4 节中，将有助于理解它：

    3.2.4 阴影选择：/deep/ 组合器

    当在选择器中找到组合/deep/器时，通过遍历任意数量的子列表或影子树，将选择器匹配列表中的所有元素替换为可从原始元素访问的每个元素。

    例如，假设我们有一个带有阴影树的组件，如下所示：

    <x-foo>
    <"shadow tree">
      <div>
        <span id="not-top">...</span>
      </div>
      <span id="top">...</span>
      <x-bar>
        <"shadow tree">
          <span id="nested">...</span>
        </>
      </x-bar>
    </>
  </x-foo>

    对于外部文档中的样式表，选择器x-foo/deep/span选择所有三个元素：#top、 #not-top和#nested.

    问题：

    这基本上是一个超降组合子。如果后代组合器有一个实际的字形，那么复制它可能会很有趣。也许我们可以给后代组合器一个假名>>，因为它是一个超子组合器？所以/deep/可以写成>>>

    兼容性

    组合器已在Polymer或 Angular等一些库deep中被声明为弃用（参见官方页面以及SO 上的这个问题），与Chrome中的相同。

    这是一个需要更多深度的主题，因为它取决于您使用的库。

    这些链接可能会帮助您对兼容性做出判断：

    • 8

  2. 首先你必须知道影子 DOM是什么：基本上它是另一个 DOM 中的一个 DOM，类似于 DOM，iframe但作为同一个文档的一部分。shadow DOM有自己的 不影响主 DOM 的样式，来自主 DOM 的样式也不影响shadow DOM。

    为了将样式从主 DOM 应用到影子 DOM/deep/ ，使用了遍历该封装的选择器。在最新的草稿中，它不再出现/deep/，而是>>>：https ://drafts.c​​sswg.org/css-scoping-1/#deep-combinator 。

    Shadow DOM浏览器支持还很有限，只有 Chrome 和 Opera 支持，Safari 部分支持。

    查看 shadow DOM 工作原理的一种方法是使用 Chrome 开发人员工具，在选项中激活该选项Show user agent shadow DOM，如果您检查类似 的元素<video<，<audio>以及其他一些元素，您可以看到浏览器如何在元素内构建封装的 DOM：

    在此处输入图像描述

    • 4