Question

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

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

li{font-size: 20px;}

等等。

我如何通过我的css文件来调用我的元素来获取css属性？

Answer 1

你不能那样工作。您必须覆盖另一个工作表中的CSS。（或在同一张纸的某处）。

像这样：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您不必使用!important，因为如果您使用父母，那么它通常比li更具体。

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

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

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

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

Answer 2

您需要覆盖模板的CSS样式。您可以通过以下方式执行此操作：

使用!important CSS声明示例：li{padding: 10px !important}
在类/元素之前添加父div。例如：

来自

li{padding: 10px}

将其更改为
body li {padding: 10px}

那应该有用。干杯！

如何判断元素获取指定的样式？

2 个答案: