当前CSS中没有父选择器，这就是该代码不起作用的原因。该复选框必须与所讨论的div处于同一级别。是否有CSS父选择器？
您可以将其从标签中取出，以将它们放在此处所示的同一平面上。
这个例子应该工作：
input[type=checkbox] { display: none;}input[type=checkbox]:checked~.remove-check { display: none;}input[type=checkbox]:checked~#email { display: block;}#email { display: none;}input[type=text] { width: 225px; padding: 12px 14px;}body { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: normal; font-style: normal; font-size: 14px; line-height: 1; color: #222222;}.btn { width: auto; background: #2ba6cb; border: 1px solid #1e728c; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset; color: white; cursor: pointer; display: inline-block; font-family: inherit; font-size: 14px; font-weight: bold; line-height: 1; margin: 0; padding: 10px 20px 11px; position: relative; text-align: center; text-decoration: none; -webkit-transition: background-color 0.15s ease-in-out; -moz-transition: background-color 0.15s ease-in-out; -o-transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out;}.btn:hover { background: #006582;}<label for="reveal-email" > Sign Up</label><input type="checkbox" id="reveal-email" role="button"><div id="email"> <form id="email-form" action="" method="post"> <input type="text" name="EMAIL" id="id_email" placeholder="Email" /> <input type="hidden" name="name" id="id_name_email"> <a >Apply</a> </form></div>
