将"checkbox"链接到另一个容器中的元素的任何方法(仅限 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的状态显示/隐藏相应的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>