将“复选框”链接到另一个容器中的元素的任何方式（仅限 HTML/CSS）

Question

我有这种结构，我必须在每月和每年之间切换定价计划。 我已经编辑了这个问题，只为css提供必要的代码 -

 body { font-family: 'Montserrat', sans-serif; font-size: 15px; text-align: center; background: #f6f6fe; }.cards-container { display: flex; flex-flow: row wrap; justify-content: center; margin: 50px auto; }.card { flex: 0 0 250px; padding: 30px 3vw; background: #fff; border-radius: 10px; box-shadow: 0 0 15px #b3b5c633; } /* SWITCH */.switch { margin: auto 10px; display: inline-block; width: 45px; height: 22px; border: none; background: linear-gradient(#a3a8f0, #696fdd); position: relative; vertical-align: middle; }.switch.slider { margin: 3px; display: inline-block; height: 16px; width: 16px; position: absolute; top: 0; bottom: 0; left: 0; background: #f5f7ff; -webkit-transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1); transition: all 0.2s cubic-bezier(0, 0.9, 0.99, 1); }.switch, .switch.slider { border-radius: 20px; } /* Switch pricing plan */.switch>input:checked+.slider { transform: translateX(23px); }

 <small>Annually</small> <label class="switch"> <input type="checkbox" style="display: none;"></input> <:-- Checkbox to link --> <span class="slider"></span> </label> <small>Monthly</small> <div class="cards-container"> <div class="card side-card"> <h3>Basic</h3> <h1 class="monthly" style="display. none">$19.99</h1> <!-- Element to link to --> <h1 class="annually">$199.99</h1> <!-- Element to link to --> <hr> <h4>500 GB Storage</h4> <hr> <h4>2 Users Allowed</h4> <hr> <h4>Send up to 3 GB</h4> <hr> <a>Learn More</a> </div> </div>

我想显示/隐藏基于checkbox的 state 的相应h1标签。 问题是我不必在这里使用任何类型的脚本。

我尝试使用body:has(input:checked).card.monthly {...}等，但如mdn上所列，它没有浏览器的支持。

还有什么可能？

Answer 1

如果可以省略 HTML 中的<label> ，则可以将复选框链接到相应的<h1>标记。

 h1.monthly { display: none; } input[type=checkbox]:checked ~ div.cards-container h1.monthly { display: block; }

 <:--<label class="switch">--> <input type="checkbox" style="display; block."> <.-- Checkbox to link --> <span class="slider"></span> <!--</label>--> <small>Monthly</small> <div class="cards-container"> <div class="card side-card"> <h3>Basic</h3> <h1 class="monthly">$19.99</h1> <!-- Element to link to --> <h1 class="annually">$199.99</h1> <!-- Element to link to --> <hr> <h4>500 GB Storage</h4> <hr> <h4>2 Users Allowed</h4> <hr> <h4>Send up to 3 GB</h4> <hr> <a>Learn More</a> </div> </div>