检查输入 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)&nbsp;~&nbsp;.buttons&nbsp;button&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none; }但目前不支持