Question

我的wordpress网站中的一个主要插件发生CSS冲突。插件制造商发现在所有样式表中添加！important声明很方便。从开发人员的角度来看；这是一场灾难。为了捍卫自己的利益，他们希望涵盖使用！important声明的所有主题，因此它看起来是一致的。我不同意，所以我需要一个解决方案。

发生的事情是，我的高级主题（未使用这些声明）无法覆盖样式。我有一些解决方案，可以通过jQuery删除某些类。

但是存在一个无法通过删除类来解决的问题。例如，锚点:hover被插件默认为border: none !important。但是我想看到的是，anchor：hover border选项实际上是通过主题设置应用的。所应用的CSS是这样的（请注意，.plugin类不是仅在CSS文件中应用在锚中）：

.plugin a { border: none !important; }

有什么方法可以禁用DOM中的某些类组合吗？我很高兴用php或jQuery完成此操作。像这样的东西：.plugin is not applied to anchor我不知道该如何解决。

Answer 1

当然，这只是用更好的CSS行覆盖CSS的情况。

例如，如果代码是：

.plugin a::hover { border: none !important; }

您可以通过执行以下操作将其覆盖：

body .plugin a::hover { border: 1px solid grey !important; }

由于您已将元素 body 添加到CSS行中，因此添加了更多的特殊性，这意味着它将覆盖插件CSS。不幸的是，您必须使用！important，因为！important会将常规特异性排除在窗口外（错误的插件创建者）。

More on css specificity here

Answer 2

您需要插件提供的任何样式吗？如果不是这样，那么值得一提的是完全取消插件样式，而仅在主题无法覆盖的地方添加自己的样式。

如果您找到样式表的注册名称（应在样式标签中），则可以使用以下方法将其出队：

function remove_push_plugin_styles() {
   wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );

Answer 3

是的，您无法编辑iframe的内容。但是iframe本身仍然属于您的页面，您可以编辑属性。我刚刚进行了测试，并且能够执行以下操作：

var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');

话虽这么说，在这种情况下使用！important也不错。如果您担心CSS维护，请留下评论！重要声明将覆盖元素的属性。！important通常被妖魔化，但是在这种情况下，它是增加CSS特异性的有效方法。

在CSS中执行此操作的优点是，它将在加载JavaScript之前应用，因此在JavaScript删除样式之前不会一瞬间应用这些属性和样式。

禁用/删除元素中的默认！important声明

3 个答案: