：检查在css中不工作

Question

上下文：

上个月，我一直在一家有趣的创业公司的前端和后端工作。网站上有一个用于登录用户的个人资料页面。如下所示，其默认状态为：

默认状态

使用“复选框” hack /技巧，通过单击设置图标（通过下面的css中的标签标记进行引用），登录的用户可以打开侧面菜单，其中包含其帐户的设置和选项，如下所示：

菜单已展开

问题：

应该点击个人资料文本以创建一个下拉菜单，以便用户可以上传自己的个人资料图片。我希望通过与以前相同的复选框黑客来做到这一点。 但是，当单击配置文件文本（称为h1）时，复选框已选中，但背景（称为.sidebar h1）未将其颜色更改为红色。我认为这是由于CSS中的：checked函数存在问题，因为当我单击配置文件文本时，我可以看到该复选框已被选中和未选中。

值得注意的是：

1. 我可以使用javascript，但这确实不是可取的（我工作的人不是忠实拥护者。）
2. 这是整个文件：https://pastebin.com/E0H6HgRe

CSS

.sidebar {
    background-color: white; 
    position: fixed;
    top: 0;
    width: 0; 
    bottom: 0; 
}
input#slide-sidebar[type="checkbox"] {
  display: none; 
}



input#slide-sidebar:checked ~ .sidebar{
left: 0; 
width: 201; 
z-index: 3;
-webkit-transition: width 2s; 
transition: width 2s; 
}

.setting {
    font-size: 100px;
    color:black;
    z-index: 0;
    background-color:white;
    position: fixed;
    left: 18.8%;
    width: 100%;
}

input#slide-sidebar:not(:checked) ~ .sidebar {
    width: 0;  
    -webkit-transition: width 2s; 
    transition: width 2s; 
}

h1{
    color: #222; 
    font-size: 20;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    color:black;
    left: 0px;
    opacity:0;
    position: fixed;
    top: 200px;
}

input#slide-sidebar:checked ~ .sidebar h1 {
    opacity: 1; 
    transition: opacity 1s ease-in;
    -webkit-transition: opacity 1s ease-in;
}

input#slide-sidebar:not(:checked) ~ .sidebar h1 {
    opacity: 0;
    transition: opacity 0.5s ease-out; 
    -webkit-transition: opacity 0.5s ease-out;
}
input#profile-pic:checked ~ .sidebar h1 {
background-color: red; 
}

Php（在php中运行html）

echo "<div class='main-wrap'><input id='slide-sidebar' type = 'checkbox' role='button' /> <label for='slide-sidebar' class='setting'><span><i class = 'fa fa-cog'></i></span></label><div class='sidebar'>

<input id='profile-pic' type = 'checkbox' role='button' /><label for='profile-pic'><span><h1> Profile</h1></span></label></div>";