PHP更改CSS样式

Question

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:

Any suggestions here? Thanks!

Edit:

Just tried using a jQuery way with no luck:

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

Answer 1

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');