时间戳

首页 > 解决方案 > 是否可以同时使用 ~ 和 + 选择器？

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

问题描述

出于演示目的说我有 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 在上面一次而不是两次，以任何方式？

标签： htmlcss

解决方案

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

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

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

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

推荐阅读