Question

我总是使用此方法为用户显示相关的CSS，但我想知道是否有更好的方法来实现此目的。

<?php
//MySQL request
$data = $request->fetch();
?>
<div 
    class="if(isset($_SESSION['id']) && !empty($_SESSION['id'])){ 
             if($_SESSION['id'] ==  $data['id']) { 
                echo "divLoggedInUser"; 
             } 
             else {
                echo "divLoggedInUser";
             }
           } else{ 
             echo "divNotLoggedIn"; 
             }"  
    id="<?php echo $data['id']; ?>"> 

    <!--class is used for relavant css, id for javascript element selector -->


</div>

在这个例子中，这不是一个大问题，但是当你有很多代码时它会变得一团糟。我想知道是否有相同的方法来做到这一点？

像这样的css中的东西会非常棒：

.div::loggedIn
.div::notLoggedIn

Answer 1

没有，无论如何都必须生成一些代码，这些代码允许您在CSS中确定是否为登录用户设置元素样式。

如果您还没有这样做，请将您的代码放在函数中以便更好地阅读：

<?php
function getCssUserClass() {
    if(isset($_SESSION['id']) && !empty($_SESSION['id'])){ 
        if($_SESSION['id'] ==  $data['id']) { 
            return "loggedIn"; 
        } else {
            return "notLoggedIn";
        }
    } else { 
        return "loggedIn"; 
    }
}
?>

<div class="<?= getCssUserClass() ?>"><span class="username">Frank</span></div>

然后你可以相应地设置div和其中所有元素的样式：

.loggedIn {

}
.loggedIn span.username {
    color: #FF0000;
}

.notLoggedIn {

}
notLoggedIn span.username {
    color: #999;
}

Answer 2

为什么不根据用户是否登录来呈现不同的CSS文件，然后将通用类分配给应该隐藏的div。

创建2个CSS文件，loggedinusers.css和notloggedinusers.css。对于您的loggedinusers.css

div.showToLoggedInUser {
   display:block;
}

和你的notoggedinusers.css

div.showToLoggedInUser {
  display:none;
}

然后使用您登录的逻辑添加适当的CSS文件

<?php
  $css_file = "notloggedinuser.css";

  if(isset($_SESSION['id']) && !empty($_SESSION['id'])){ 
    if($_SESSION['id'] ==  $data['id']) { 
      $css_file = "loggedinuser.css";
    } 
?>
<link rel="stylesheet" href="<?PHP echo $css_file; ?> />

Answer 3

您可以在body元素上设置loggedIn/notLoggedIn类，然后添加需要引用该设置的CSS规则：

div.anyOtherClass {
    /* default styling */
}

body.loggedIn div.anyOtherClass{
    /* logged-in styling */    
}

body.loggedIn div.anyOtherClass{
    /* logged-out styling */
}

显示与用户相关的不同css

3 个答案: