html - 如何告诉元素获得指定的样式？

Question

我开发了一个 WordPress 插件，我的插件在示例模板上运行良好。但是当我将它安装在其他模板上时，它会从其他来源获取样式属性。

例如在作者写的模板 css 文件中:

li{font-size: 20px;}

等等

我如何才能让我的元素仅从我的 css 文件中获取 css 属性？

Answer 1

你不能那样工作。您必须覆盖另一张纸中的 css。 (或在同一张纸的某处)。

像这样:

li{font-size: 20px;}

.small-list > li{font-size: 10px;}

<ul>
  <li>List item 1.1</li>  
  <li>List item 1.2</li>
  <li>List item 1.3</li>
</ul>

<ul class="small-list">
  <li>List item 2.1</li>  
  <li>List item 2.2</li>
  <li>List item 2.3</li>
</ul>

您不必使用 !important，因为如果您使用父级，它已经比一般的 li 更具体。

另一种选择是将您的样式表放在模板中的样式表之后。

<link href="template-styles.css" rel="stylesheet" />
<link href="plugin-styles.css" rel="stylesheet" />

如果您使用完全相同的 css 选择器，第二张纸将覆盖第一张。

不使用 !important 的另一个很好的理由是您不想覆盖所有规则。您介于模板和页面作者之间。作者很可能使用的是 WYSIWYG 编辑器。如果您使用 !important，您可能会覆盖作者真正想要的规则。