html - 可以同时使用 ~ 和 + 选择器吗？

Question

为了演示目的，假设我有这样的 html:

<input type="checkbox" id='hi'>
<label for="hi"> hi </label>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

和相应的CSS作为

ul {
  display:none;
}

input[type='checkbox']:checked ~ul{
  display:inline-block;
  background-color:red;
}

input[type='checkbox']:checked +label {
  background-color:red;
}

想法是，当复选框被选中时，我希望带有文本“hi”的标签具有红色背景色，并且还显示具有红色背景色的 ul。

如上所示，我需要复制代码以便在每个 :checked 之后有一个 ~ul 和 +label

我很想知道这是否可以组合，即在上面只使用 :checked 一次而不是两次，以任何方式？

Answer 1

不，当您需要将不同的属性应用于不同的选择器时，在纯 CSS 中无法在一条规则中完成。这就是为什么人们有时会选择使用可编译为 CSS 的语言，例如 Sass 或 Less。

input[type='checkbox']:checked {
    & ~ ul, & + label {
        background-color: red;
    }

    & ~ ul {
        display: inline-block;
    }
}

主要的替代方法是更改​​您的 HTML 结构，使选择器更加自然。