CSS中:checked选择器不生效，点击标签后隐藏div无法显示如何解决？

• CSS选择器优先级不匹配：你给#hot设置隐藏用的是ID选择器，权重为100；而:checked触发的显示规则用的是「属性选择器+伪类+元素选择器」的组合，总权重仅为21，优先级低于ID选择器，就算触发了选中状态也无法覆盖原有display:none的配置。
• 额外小问题：当前代码没有隐藏原生复选框，页面会显示多余的勾选框，不符合点击文本触发的交互预期。

方案1：调整选择器提高显示规则优先级（推荐） #

给触发显示的选择器加上ID匹配，提高权重到121，即可覆盖原有隐藏规则，不需要修改HTML结构：

/* 把原有选中规则替换为下面的代码 */
[id^=drop]:checked + div#hot { display: block; }

方案2：降低隐藏规则的优先级 #

把#hot的选择器换成类选择器，把权重降到10，低于显示规则的21即可生效，需要同步修改HTML：

/* 替换原有#hot的样式 */
.hot{
  display:none;
}

对应HTML的div标签修改为：

<div class="hot" id="hot">This text needs to be visible</div>

可选优化（隐藏原生复选框） #

添加如下样式隐藏多余的复选框，只保留文本点击交互：

[id^=drop] {
  display: none;
}

<style>
#hot{
  display:none;
}
/* 隐藏原生复选框 */
[id^=drop] {
  display: none;
}
[id^=drop]:checked + div#hot { display: block; }
</style>

<label for="drop-123" class="toggle">ENGLISH GRAMMAR</label>
<input type="checkbox" id="drop-123" />
<div id="hot">This text needs to be visible</div>

内容的提问来源于stack exchange，提问作者Asif Iqbal