CSS中的一个问题，CSS没有正确应用于html代码

Question

所以这是我试图在自己的页面上重新创建的代码：https://codepen.io/Vlad3356/pen/PoReJVg

这是我写的代码：https://codepen.io/Vlad3356/pen/GRxdMPz

我不明白为什么当我按下星号时，我的代码上没有收到相同的标题信息？感谢

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;

Answer 1

在他们的CSS中，

#rate-1:checked ~ form header:before{
content: "I just hate it ";
}

符号波浪号(~(被称为后续同级组合器。因此，他们的代码有一个标题，作为星形标签的兄弟：

<div class="star-widget">
<input type="radio" name="rate" id="rate-5">
<label for="rate-5" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-4">
<label for="rate-4" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-3">
<label for="rate-3" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-2">
<label for="rate-2" class="fas fa-star"></label>
<input type="radio" name="rate" id="rate-1">
<label for="rate-1" class="fas fa-star"></label>
<form action="#">
<header></header>

你需要移动你的html来匹配，或者使用一些javascript来匹配

Answer 2

如果检查原始代码https://codepen.io/Vlad3356/pen/PoReJVg

这就是的诀窍

#rate-1:checked ~ form header:before{
content: "I just hate it ";
}
#rate-2:checked ~ form header:before{
content: "I don't like it ";
}
#rate-3:checked ~ form header:before{
content: "It is awesome ";
}
#rate-4:checked ~ form header:before{
content: "I just like it ";
}
#rate-5:checked ~ form header:before{
content: "I just love it ";
}
.container form{
display: none;
}
input:checked ~ form{
display: block;
}

如果复选框被选中，它将显示表单，否则它将隐藏