douwen3198
2017-01-30 01:40
浏览 562
已采纳

PHP更改CSS样式

I'm trying to hide a login button if the user is logged in. Due to the clients Wordpress setup, I'm not able to directly edit the button HTML.

Button HTML (unable to edit):

<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item object-custom current-menu-item current_page_item menu-item-home menu-item-153">
  <a href="#">
     <span id="SignUp" class="et_pb_more_button et_pb_button">
       <p>SIGN UP</p>
     </span>
  </a>
</li>

My thoughts was to write a simple PHP if statement to change the CSS within the header.

<?php
    if ( is_user_logged_in() ) {
    ?>
    <style type="text/css">
        #menu-item-153 {
                display: none;
      }
  </style>
<?php } ?>

However, the PHP echo outputs on the page but it doesn't change the CSS.

On inspection, it looks like the following:

enter image description here

Any suggestions here? Thanks!

Edit:

Just tried using a jQuery way with no luck:

<script>
    $( 'menu-item-153' ).css('display', 'none');
</script>

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

如果用户已登录,我正在尝试隐藏登录按钮。由于客户端 Wordpress 设置,我无法直接编辑HTML按钮。

按钮HTML(无法编辑):

 &lt; li id =“menu-item-  153“class =”menu-item menu-item-type-custom menu-item object-custom current-menu-item current_page_item menu-item-home menu-item-153“&gt; 
&lt; a href =”#“  &gt; 
&lt; span id =“SignUp”class =“et_pb_more_button et_pb_button”&gt; 
&lt; p&gt; SIGN UP&lt; / p&gt; 
&lt; / span&gt; 
&lt; / a&gt; 
&lt; /  li&gt; 
   
 
 

我的想法是编写一个简单的PHP if语句来更改标题中的CSS。

 &lt;?php 
 if(is_user_logged_in()){
?&gt; 
&lt; style type =“text / css”&gt; 
#menu-item-153 {
 display:none; 
  } 
&lt; / style&gt; 
&lt;?php}?&gt; 
   
 
 

但是,页面上的PHP回显输出却没有改变 CSS。

在检查时,它看起来如下所示:

\ n

这里有什么建议吗? 谢谢!

编辑:

尝试使用jQuery方式没有运气: \ n

 &lt; script&gt; 
 $('menu-item-153')。css('display','none'); 
&lt; / script&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongxiao0449 2017-01-30 01:46
    已采纳

    It's a CSS specificity issue. You can use

    #top-menu li#menu-item-153 {
      display: none;
    }
    

    or

    #menu-item-153 {
      display: none!important;
    }
    

    Or if you want to do it with jQuery, you left off the # ID part of the selector

    $('#menu-item-153').css('display', 'none');
    
    已采纳该答案
    打赏 评论
  • dqd78456 2017-01-30 01:46

    Your PHP-part is functioning just as it should.

    Your problem is that your "display:none;" is being overriden by another piece of styling:

    #top-menu li {
    display:inline-block;
    }
    

    Make YOUR CSS selector more specifik to override this: Use this:

    #top-menu #menu-item-153 {
    display:none;
    }
    
    打赏 评论
  • dougan6402 2017-01-30 02:03

    You have a rule with specificity of 101 points.

    #top-menu /* id selector = 100 specificity points */
    
    li        /* element selector = 1 specificity point */
    

    The above rule is overriding another rule with a specificity of 100:

    #menu-item-153 /* 100 specificity points */
    

    You could use !important to quash the first rule and get it over with.

    However, often times it's good to reserve !important for when it's absolutely necessary.

    In this case, you just need 2 points for the preferred rule to prevail. This should do it:

    li#menu-item-153.menu-item /* class selector = 10 specificity points (111 total) */
    

    or

    #top-menu > #menu-item-153 /* 200 specificity points */
    

    More info: http://cssspecificity.com/

    打赏 评论