[英]PHP Change CSS Style
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. 如果用户已登录,我试图隐藏一个登录按钮。由于有客户端Wordpress安装程序,因此我无法直接编辑HTML按钮。
Button HTML (unable to edit): 按钮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>
My thoughts was to write a simple PHP if statement to change the CSS within the header. 我的想法是编写一个简单的PHP if语句来更改标头中的CSS。
<?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. 但是,页面上的PHP回显输出却不会更改CSS。
On inspection, it looks like the following: 经过检查,它看起来如下所示:
Any suggestions here? 有什么建议吗? Thanks!
谢谢!
Edit: 编辑:
Just tried using a jQuery way with no luck: 刚尝试使用没有运气的jQuery方式:
<script>
$( 'menu-item-153' ).css('display', 'none');
</script>
It's a CSS specificity issue. 这是CSS的特殊性问题。 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 或者,如果你想用jQuery做到这一点,你不放过
#
选择的ID部分
$('#menu-item-153').css('display', 'none');
Your PHP-part is functioning just as it should. 您的PHP部分运行正常。
Your problem is that your "display:none;" 您的问题是您的“ 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: 使您的CSS选择器更具规范性以覆盖此:使用此:
#top-menu #menu-item-153 {
display:none;
}
You have a rule with specificity of 101 points. 您的规则的特异性为101分。
#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: 上面的规则将覆盖另一个特异性为100的规则:
#menu-item-153 /* 100 specificity points */
You could use !important
to quash the first rule and get it over with. 您可以使用
!important
取消第一个规则并将其替换。
However, often times it's good to reserve !important
for when it's absolutely necessary . 但是,通常最好在绝对必要时保留
!important
。
In this case, you just need 2 points for the preferred rule to prevail. 在这种情况下,您只需要2分就可以成为首选规则。 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/ 更多信息: http : //cssspecificity.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.