检查输入 html 中的属性，以便在块位置不同时隐藏 css 内容

Question

问题是 - 我可以像下面的代码那样将输入与按钮连接起来吗？或者不改变 html 是不可能的（如果我不会为此使用 js 代码）。不要责骂 html 代码，这个例子来自一个网站，我只是想弄清楚是否可以访问给定嵌套的其他块。input:checked ~ button{    display: none;  }<div  id="form">    <section class="container">        <form class="form">            <section class="checkbox-control">                <label for="personal-data-checkbox" class="checkbox-border">                    <input type="checkbox"  id="personal-data-checkbox">                </label>                <label for="personal-data-checkbox" class="checkbox-label">                    <span class="consent-message"></span>                </label>            </section>            <section class="checkbox-control">                <label for="cookie-checkbox" class="checkbox-border">                    <input type="checkbox"  id="cookie-checkbox">                </label>                <label for="cookie--checkbox" class="checkbox-label">                    <span> </span>                </label>            </section>            <section class="buttons">                <section class="confirm">                    <button class="accept-all-button button">Agree to all</button>                    <button class="confirm-button button hidden-button">Confirm</button>                </section>            </section>            </form>    </section></div>

Answer 1

我可以用按钮连接输入吗

不，你无法连接。截至 2020 年 4 月，没有选择器可以从子项中选择父项

然而https://dev.w3.org/csswg/selectors4/#relational，该文档说他们将包括:has()selecor。使用它你可以这样做

.checkbox-control:has(input:checked) ~ .buttons button {
      display: none;
}

但目前不支持