将复选框的伪类应用于特定同级

Question

我正在考虑在不使用 Javascript 的情况下实现侧边栏的 CSS Native 多级菜单（或我当前的 React 实现中的

setState

）。 我几乎已经完成了所有操作，但我遇到了一个附加功能，即选中复选框时将 V 形旋转 90 度。

每个组都会打开一个级别，其中可以包含一个附加级别。我试图不使用命名组/对等体，以便我可以轻松地从例如JSON 文件。

我尝试更改

peer

位置并使用

group

但没有任何运气。我可以重构我的代码，交换元素并实现它，但这可能不是正确的解决方案。

我有此代码可用。一切正常，但人字形不旋转。

Answer 1

<svg>

的同级只能是

<span>

，因为

peer-

使用兄弟CSS组合器

+

。要根据

<svg>

旋转

<input>

，您可以考虑使用带有任意修饰符的

group

，

<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<div class="container mx-auto flex h-screen">
  <div class="flex w-48 flex-col bg-slate-100">
    <div class="hover:bg-pink-300">Item 1</div>
    <div class="hover:bg-pink-300">Item 2</div>
    <div class="hover:bg-pink-300">Item 3</div>
    <label class="cursor-pointer">
      <input type="checkbox" class="peer hidden cursor-pointer select-none rounded-lg bg-slate-500 ease-in-out">
      <div class="flex items-center justify-between group">
        <span>Group 1</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 group-[:checked+&]:rotate-90">
          <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg
      ></div>

      <div class="relative hidden pl-4 peer-checked:block">
        <div class="hover:bg-pink-300">Item 1-1</div>
        <div class="hover:bg-pink-300">Item 1-2</div>
        <div class="hover:bg-pink-300">Item 1-3</div>
        <label class="peer cursor-pointer">
          <input type="checkbox" class="peer hidden cursor-pointer select-none rounded-lg bg-slate-500 ease-in-out" />
          <span class="flex items-center justify-between group">
            <span>Group 2</span>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-4 w-4 group-[:checked+&]:rotate-90">
              <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /></svg
          ></span>
          <div class="relative hidden pl-4 peer-checked:block">
            <div class="hover:bg-pink-300">Item 2-1</div>
            <div class="hover:bg-pink-300">Item 2-2</div>
            <div class="hover:bg-pink-300">Item 2-3</div>
          </div>
        </label>
      </div>
    </label>
  </div>
  <div class="flex flex-1 bg-lime-100"></div>
</div>