Html CSS 选择器中的 /deep/ 和 ::shadow 是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25609678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What do /deep/ and ::shadow mean in a CSS selector?
提问by Drew Noakes
In looking at Polymer, I see the following CSS selector in the Stylestab of Chrome 37's developer tools:
在查看 Polymer 时，我在Chrome 37 开发人员工具的“样式”选项卡中看到以下 CSS 选择器：
I've also seen a selector with pseudo selector ::shadow.
我还看到了一个带有伪选择器的选择器::shadow。
So, what do /deep/and ::shadowin a CSS selector mean?
那么，CSS 选择器中的/deep/and::shadow是什么意思呢？
回答by Drew Noakes
As Joel H. points out in the comments, Chrome has since deprecated the /deep/combinator, and it gives a syntax error in IE.
正如 Joel H. 在评论中指出的那样，Chrome 已经弃用了/deep/组合器，并且在 IE 中出现了语法错误。
HTML5 Web Components offer full encapsulation of CSS styles.
HTML5 Web Components 提供对 CSS 样式的完整封装。
This means that:
这意味着：
- styles defined within a component cannot leak out and effect the rest of the page
- styles defined at the page level do not modify the component's own styles
- 组件中定义的样式不能泄漏并影响页面的其余部分
- 在页面级别定义的样式不会修改组件自身的样式
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.
然而，有时您希望拥有页面级规则来操作在其 shadow DOM 中定义的组件元素的表示。为此，您需要添加/deep/到 CSS 选择器中。
So in the example shown, html /deep/ [self-end]is selecting all elements under the html(top level) element that have the self-endattribute, including those buried inside web components' shadow DOMs roots.
因此，在显示的示例中，html /deep/ [self-end]选择html具有该self-end属性的（顶级）元素下的所有元素，包括那些埋在 web 组件的 shadow DOM 根中的元素。
If you requirea selected element to live within a shadow root, then you can use the ::shadowpseudo selector on its parent element.
如果你需要一个被选择的元素存在于一个影子根中，那么你可以::shadow在其父元素上使用伪选择器。
Consider:
考虑：
<div>
<span>Outer</span>
#shadow-root
<my-component>
<span>Inner</span>
</my-component>
</div>
The selector html /deep/ spanwill select both <span>elements.
选择器html /deep/ span将选择这两个<span>元素。
The selector ::shadow spanwill select only the inner <span>element.
选择器::shadow span将只选择内部<span>元素。
Read more about this in the W3C's CSS Scoping Modulespecification.
在 W3C 的CSS 范围模块规范中阅读更多相关信息。
