PHP更改CSS样式

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

按钮HTML(无法编辑):</ strong> </ p>

 &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;
</ code> </ pre>

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

 &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;
</ code> </ pre>

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

在检查时,它看起来如下所示:</ p>

</ p>
\ n

这里有什么建议吗? 谢谢!</ p>

编辑:</ strong> </ p>

尝试使用jQuery方式没有运气:</ p>
\ n

 &lt; script&gt; 
$('menu-item-153')。css('display','none');
&lt; / script&gt;
</ code> </ pre >
</ div>

展开原文

原文

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>

dsfsdfsd34324
dsfsdfsd34324 所以HTML是从MySQL加载的,所以这是一个nogo...是的...奇怪的开发人员创建了这个网站。
3 年多之前 回复
douduan2272
douduan2272 啊......我需要一些睡眠谢谢!!
3 年多之前 回复
duanjiongzhen2523
duanjiongzhen2523 你应该把条件放在html而不是css上
3 年多之前 回复
dqqs64238
dqqs64238 这是一个CSS特异性问题。您可以使用#menu-item-153{display:none!important;}或#top-menuli#menu-item-153{display:none;}
3 年多之前 回复

3个回答



这是一个CSS特异性问题。 您可以使用</ p>

  #top-menu li#menu-item-153 {
display:none;
}
</ code> </ pre>

或</ p>

 #menu-item-153 {
display:none!important;
}
</ code> </ pre>

或者如果你想用jQuery做,你就不用选择的#</ code> ID部分</ p>

  $('#  menu-item-153')。css('display','none'); 
</ code> </ pre>
</ div>

展开原文

原文

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

douzhi8244
douzhi8244 佛笑!
3 年多之前 回复



你的PHP部分正常运作。</ p>

你的问题是你的“ 显示:无;” 正在被另一种样式覆盖:</ p>

  #top-menu li {
display:inline-block;
}
</ code> </ pre> \ n

使你的CSS选择器更具特异性来覆盖它:
使用:</ p>

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

}
</ code> </ pre>
</ div>

展开原文

原文

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



您的规则具有101点的特异性。</ p>

  #top-menu  / * id选择器= 100个特异性点* / 

li / 元素选择器= 1特异性点 /
</ code> </ pre>

上述规则覆盖了另一个规则 特异性100:</ p>

 #menu-item-153 / * 100特异性点* / 
</ code> </ pre>

你可以 使用!important </ code>来撤销第一条规则并将其解决。</ p>

但是,通常最好保留!important </ code> for 当它绝对必要时</ em>。</ p>

在这种情况下,您只需要2分即可获得首选规则。 这应该这样做:</ p>

  li#menu-item-153.menu-item / * class selector = 10个特殊点(总共111个)* / 
</ code> </ pre>

或</ p>

  #top-menu&gt;  #menu-item-153 / * 200特异性点* / 
</ code> </ pre>

更多信息: http://cssspecificity.com/ </ p>
</ div>

展开原文

原文

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/

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问