Question

我有一个自定义的Polymer元素，我希望以某种方式设置样式，并作为插件提供给许多不同的网站。我希望能够以一种方式封装我的自定义组件的样式，使它们在嵌入它们的所有网站上看起来都一样。以下是来自父网页的字体指令如何干扰我的组件样式的示例：

<style>
* {
  font-size: 18px;
}
</style>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      :host {
        font-size: 12px;
      }
    </style>
    <div>
      Please tell me how to make this 12pt.
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<polymer-css-test></polymer-css-test>

提前感谢您的帮助。

Answer 1

有两种方法可以达到这个目的（你甚至可以同时使用它们）。

如果您希望在此处应用样式规则，则需要使它们比“全局”规则更具体：

:host * {
    font-size: 12px;
}

此外，您可以将!important令牌添加到规则中以使其覆盖其他规则，但是应谨慎使用：

:host {
    font-size: 12px!important;
}

有关特异性的更多信息（哪些规则适用于哪些元素），请结帐this page。

如何防止外部CSS覆盖Web组件样式

1 个答案: