Question

我有一个使用WooCommerce的Wordpress网站，而且我有一个无法正常工作的插件。所以，我设法找到PHP代码中的一个特定行，当我需要它以我的方式做某事时触发它。问题是，我需要在PHP代码中更改一些CSS样式。

如何做到这样的事情？

<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>

请注意，上面的代码不正确。这只是我想要实现的一个例子。

至于更详细的细分，我正在尝试更改/覆盖我的网页上已存在的CSS样式。总的来说，诀窍是将已经存在的一些CSS样式改为做其他事情。我找到的项目的CSS（来自Firefox的HTML调试器/检查器）是：

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt

而我需要它来应用这些样式：

background: #FF8282;
pointer-events: none;

如果您需要更多信息，请告诉我。

谢谢。

Answer 1

我认为添加一个重要的东西可以解决问题。

{ background: #FF8282 !important; pointer-events: none !important; }

另外，请确保在所有其他css出现后才链接此内容。

这会有帮助吗？

Answer 2

<强>解决

我在逻辑中包含了一些PHP代码：

include '/wp-content/themes/my_theme/400.css';

该CSS文件（400.css）包含：

<style>
    .woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>

谢谢大家的帮助。非常感谢。

Answer 3

你有没有尝试在css行的末尾添加！important？这将强制您的新属性覆盖插件中的属性：

background-color : red !important;

Answer 4

我觉得这样的事情是你在寻找的。如果您想要修改，请发表评论。

$('button').click(function(){
  $('div').addClass('changed');
});

.woocomerce{
  background: cyan;  
}

.changed{
  background: #FF8282;
  pointer-events: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>

在HTML

4 个答案: