什么do / deep /和:: shadow意味着在CSS选择器？ [英] What do /deep/ and ::shadow mean in a CSS selector?

问题描述

在查看Polymer时，我在Chrome 37开发人员工具的样式标签中看到以下CSS选择器：

In looking at Polymer, I see the following CSS selector in the Styles tab of Chrome 37's developer tools:

我也看过一个选择器 / deep / :: shadow 。

I've also seen a selector with pseudo selector ::shadow.

$ c>和 :: shadow 在CSS选择器中的意思是什么？

So, what do /deep/ and ::shadow in a CSS selector mean?

推荐答案

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

HTML5 Web Components offer full encapsulation of CSS styles.

这意味着：

<

• 在页面级定义的样式不会修改该组件自己的样式

但是，有时你想要页面级的规则来操作在其shadow DOM中定义的组件元素的表示。为此，您需要向CSS选择器添加 / deep / 。

However sometimes you want to have page-level rules to manipulate the presentation of component elements defined within their shadow DOM. In order to do this, you add /deep/ to the CSS selector.

html / deep / [self-end] 正在选择 html self-end 属性，包括隐藏在web组件的shadow DOM根目录中的属性。

So in the example shown, html /deep/ [self-end] is selecting all elements under the html (top level) element that have the self-end attribute, including those buried inside web components' shadow DOMs roots.

所选元素居住在阴影根内，则可以使用 :: shadow 伪选择器作为其父元素。

If you require a selected element to live within a shadow root, then you can use the ::shadow pseudo selector on it's parent element.

请考虑：

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

选择器 html / deep / span 选择< span> 元素。

code>将仅选择内部< span> 元素。

W3C的 CSS Scoping模块规范。

这篇关于什么do / deep /和:: shadow意味着在CSS选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！