html - 使用 :checked css pseudo class with no javascript 使同级 <div> 可见

Question

我正在尝试按照 this 中发布的示例进行操作文章，我无法复制在选中单选按钮后使新元素可见的行为。

.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: scale(0.8);
  transition: 0.5s;
  input[type="radio"]:checked {
    opacity: 1;
    max-height: 100px;
    padding: 10px 20px;
    transform: scale(1);
    overflow: visible;
  }
}

<p>Are you a student or a professional?</p>
<div>
  <input type="radio" name="type" value="student" id="student">Student

  <div class="reveal-if-active">
    <p>Type of student:</p>
    <select name="student_types" data-require-pair="#student">
	  				<option display:none disabled selected value></option>
	  				<option value="highschool">High School</option>
	  				<option value="undergrad">Undergraduate</option>
	  				<option value="grad">Graduate</option>
	  			</select>
  </div>
</div>

Answer 1

使用选择器 :checked + nextElSelector ( Adjacent sibling selector ) 选择选中输入旁边的元素:

span {
  visibility: hidden;
}
input:checked + span {
  visibility: visible;
}

<input type="checkbox"/><span>TADA!</span>

---

您的示例 CSS 实际上是同一站点的 SASS 部分，只是您删除了一些元素。