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回顯輸出卻不會更改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/