Html 在css模式中使用标签和输入的替代方法

我得到了这个css模式脚本，不知道为什么不能用

替换

因为单击标签将切换复选框，但单击链接将转到另一个页面，而单击div将不起任何作用
模态取决于输入的检查状态。div不能被检查
整件事都是令人讨厌的黑客行为。这很聪明，但很下流。为了根据用户交互显示内容，跟踪状态是一项由JavaScript更好地处理的工作。
您必须使用标签作为标记

此属性将定义的标签与另一个控件显式关联。存在时，此属性的值必须与同一文档中其他控件的id属性的值相同。如果不存在，则定义的标签与元素的内容相关联

单击时，
标签
将更改
输入[type=checkbox]
的状态，并且可以放置在文档的任何位置

输入[type=checkbox]
必须放在模态旁边，这样模态就可以被CSS锁定：

input + .modal { display:none; }
input:checked + .modal { display:block}

元素有一个
for=”“
属性，它在表单元素上设置的
id=”“
中查找相同的值

示例：
单击标签时，它将更改匹配表单元素的状态。它们通常在标记中相邻，但不一定

对于
，您可以捕获CSS中的
：选中的
状态，并使用
+
或
~
选择器将某些样式更改为自身或下一个同级。这意味着modal div需要是复选框的兄弟，并且在复选框旁边

所有这些加在一起就是使用标签来控制div，这是一种不使用任何Javascript创建模式的CSS方式

<p>
    <label class="btn" for="modal-1">Show me modal with a cat</label>
</p>

<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
    <h2>The title!</h2>
    <p>This is the body</p>
  </div>
</div>

input + .modal { display:none; }
input:checked + .modal { display:block}