PHP更改CSS样式

Question

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

按钮HTML（无法编辑）：

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

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

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

但是，页面上的PHP echo输出却没有改变CSS。

在检查时，它看起来如下：

这里有什么建议吗？谢谢！

修改

尝试使用jQuery方式没有运气：

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

Answer 1

这是一个CSS特异性问题。你可以使用

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

或

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

或者如果你想用jQuery做，你就离开了选择器的# ID部分

$('#menu-item-153').css('display', 'none');

Answer 2

你的PHP部分正常运作。

你的问题是你的“display：none;”正在被另一种造型所覆盖：

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

使您的CSS选择器更具特异性以覆盖此： 使用此：

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

Answer 3

您的规则具有101点特异性。

#top-menu /* id selector = 100 specificity points */

li        /* element selector = 1 specificity point */

上述规则覆盖了另一条规则，特殊性为100：

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

您可以使用!important来取消第一条规则并将其结束。

但是，通常情况下保留!important以便绝对必要时是很好的。

在这种情况下，您只需要2分即可获得首选规则。这应该这样做：

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

或

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

更多信息：http://cssspecificity.com/