Question

我正在开发一个wordpress页面的插件，在它进入的主题中，有一个针对该主题的style.css。在那个style.css中有CSS属性适用于所有img和p标签，这搞乱了我的插件的外观。我怎么能这样做，所以我的插件有自己的样式表，忽略了主题的风格？

Answer 1

在style.css 之后加上样式表

所以：

<link rel="stylesheet" type="text/css" href="/path/to/style.css">
<link rel="stylesheet" type="text/css" href="/path/to/yourStylesheet.css">

如果仍然无效，请使用!important，但请尽量避免这种情况。

!important放在样式规则之后，如下所示：

p {
    color: red !important;
}

你也可以使用更具体的风格，比如@SarahBourt说。

#news-item > p {
    color: red;
}

Answer 2

抓住新的CSS文件，并在默认的bootstrap css文件后面包含样式表，您的样式将覆盖引导样式

如果您仍然遇到问题，也可以使用该风格旁边的!important

!important将确保您的风格将被优先考虑

<强>实施例

p{
display:inline-block !important;
}

Answer 3

您可以专门在样式表中放置样式以覆盖主题的样式。

假设您的样式表在默认主题样式表后加载，那么您可以执行以下操作。

在您的网络检查器中，找到主题样式表中的违规样式。将其复制到样式表中，并使用'initial'替换每个值以将其重置为默认值，或者将其重置为自定义样式（如果更合适）。

如果您的样式表在主题的样式之前加载，那么您仍然可以覆盖主题样式，即使它们包含!important.要覆盖!important,创建更具体的选择器比主题使用（阅读CSS specificity以找出执行此操作的最佳方式），并将!important仅添加到主题样式中具有!important的那些。如果您覆盖的样式不使用!important,，则只使用更具体的样式，因为包含太多!important标记可能会使您或其他人更难以在以后修改代码现在正在经历。

此外，您希望确保您的覆盖仅应用于您的插件，而不是网站的其他部分。因此，使用div或其他元素包装插件（如果尚未包含），并为包装器提供唯一的类或ID，例如class="my-plugin"。在此类前面加上所有覆盖，以避免破坏网站的其他区域。

HTML：

<div class="my-plugin>  </div>

CSS：

.my-plugin img { //override styles } .my-plugin p { //override styles }

覆盖这样的原始样式可能会变得混乱，但有时这是在您无法访问其他.css文件时完成任务的唯一方法。只需尽量减少使你的风格更具体，你应该没事。

如何使css不适用于某些属性？

3 个答案: