css - 显示与用户相关的不同 css

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