Shadow Dom ::content css 选择器优先级？答案

【问题标题】：Shadow Dom ::content css selector priority?Shadow Dom ::content css 选择器优先级？
【发布时间】：2015-03-03 02:21:28
【问题描述】：

我有这样的影子 dom 元素：

<style>
   ::content div{
      padding-left:130px;
   }
</style>

<div class="shadow">
   foo
   <content select="div"></content>
</div>

从页面上加载的样式尝试使用这样的选择器覆盖它

.shadow /deep/ div{
   padding-left:50px;
}

但是 shadow dom 中的选择器具有更高的优先级。我发现给第二个选择器更高优先级的唯一方法是使用重要的。还有其他方法吗？

【问题讨论】：

标签： css html css-selectors shadow-dom

【解决方案1】：

如果您的 div 来自 light DOM，您实际上并不需要 /deep/。

我认为您有两个同等重要的选择器：::content div 和 .shadow div。解决这个问题的一种方法是给你的div 一个类，并让覆盖样式使用它来提高他们的分数。

例如：jsbin

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer</title>
    <script src="http://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
    <style>
      .widget .special {
        color: blue;
      }
    </style>
  </head>
  <body>

    <polymer-element name="x-foo">
      <template>
        <style>
          ::content > div {
            color: red;
          }
        </style>
        <h1>Hello from x-foo</h1>
        <content select="div"></content>
      </template>
      <script>
        Polymer({

        });
      </script>
    </polymer-element>

    <x-foo class="widget">
      <div class="special">Hello World</div>
    </x-foo>

  </body>
</html>

【讨论】：

实际上，如果我们假设 ::content 在特异性方面表现得与任何其他伪元素一样，那么 ::content div 的特异性 (0, 2) 小于 @ 987654330@(1, 1)，因为伪元素与类型选择器具有相同的特异性。