是否可以同时使用〜和+选择器？

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。

如上所示，我需要重复代码才能在每个：check之后加上〜ul和+ label

我想知道是否可以将其组合，即仅使用：checked在上面一次而不是以任何方式两次吗？

Answer 1

否，当您需要将不同的属性应用于不同的选择器时，就无法使用纯CSS的一条规则来做到这一点。这就是为什么人们有时选择使用编译为CSS的语言（例如Sass或Less）的原因。

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

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

主要的好选择是更改HTML结构，以使选择器更加自然。