donglaohua1671
2016-03-21 04:18
浏览 54
已采纳

在HTML中自定义CSS

I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.

How exactly would one do something like this?

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

Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.

As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:

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

And I need it to apply these styles instead:

background: #FF8282;
pointer-events: none;

If you need more information, just let me know.

Thank you.

图片转代码服务由CSDN问答提供 功能建议

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

如何做到这样的事情?

 &lt  ; woocommerce class =“a.button.alt”&gt;&lt; style&gt;背景:#FF8282;  pointer-events:none;&lt; / style&gt;&lt; / h1&gt; 
&lt; woocommerce class =“button.button.alt”&gt;&lt; style&gt; background:#FF8282;  pointer-events:none;&lt; / style&gt;&lt; / h1&gt; 
   
 
 

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

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

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

我需要它来应用这些样式: < pre> background:#FF8282; pointer-events:none;

如果您需要更多信息,请告诉我。 \ n

谢谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • dousong4777 2016-03-21 07:57
    已采纳

    SOLVED

    I included in the logic that was tripping some PHP code:

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

    And that CSS file (400.css) contained:

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

    Thank you everyone for your help. Much appreciated.

    点赞 打赏 评论
  • douzi6992 2016-03-21 04:21

    I think that adding an !important behind would do the trick.

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

    Also, make sure u only link this after all other css occurences.

    Would this help?

    点赞 打赏 评论
  • duanbu1421 2016-03-21 04:25

    Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :

    background-color : red !important;
    
    点赞 打赏 评论
  • duandanai6470 2016-03-21 05:07

    I guess something like this is your looking for. Just comment if you want modification.

    $('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>

    </div>
    
    点赞 打赏 评论

相关推荐 更多相似问题