將“復選框”鏈接到另一個容器中的元素的任何方式（僅限 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>