如何编写禁用且选中状态的复选框切换器样式？

我不知道如何在该状态下修改切换器颜色，且不能使用复杂的多级选择器结构，选择器嵌套层级不能超过3层。请提供尽可能多的示例以便理解。

我的HTML代码 #

<fieldset class="filters__group filter-country">
          <legend class="filters__title">Страна произрастания</legend>
          <ul class="filters__list filter-country__list">
            <li class="filters__item filter-country__item">
              <input class="filter-country__control visually-hidden" type="checkbox" id="country-brazil" name="country" value="brazil" checked>
              <label class="filter-country__text" for="country-brazil">Бразилия</label>
            </li>
            <li class="filters__item filter-country__item">
              <input class="filter-country__control visually-hidden" type="checkbox" id="country-ethiopia" name="country" value="ethiopia">
              <label class="filter-country__text" for="country-ethiopia">Эфиопия</label>
            </li>
            <li class="filters__item filter-country__item">
              <input class="filter-country__control visually-hidden" type="checkbox" id="country-colombia" name="country" value="colombia">
              <label class="filter-country__text" for="country-colombia">Колумбия</label>
            </li>
            <li class="filters__item filter-country__item">
              <input class="filter-country__control visually-hidden" type="checkbox" id="country-costa-rica" name="country" value="costa-rica" disabled>
              <label class="filter-country__text" for="country-costa-rica">Коста-Рика</label>
            </li>
            <li class="filters__item filter-country__item">
              <input class="filter-country__control visually-hidden" type="checkbox" id="country-peru" name="country" value="peru"  disabled>
              <label class="filter-country__text" for="country-peru">Перу</label>
            </li>
          </ul>
        </fieldset>

我的SCSS代码 #

.filter-country__text {
  --color: #bdbdbd;
  --control-color: #f8f8f8;
  --border-color: #bdbdbd;
  position: relative;
  padding-left: 52px;

  &::before {
    position: absolute;
    content: "";
    width: 42px;
    height: 21px;
    left: 0;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--color);
    transition: background-color 0.4s;
  }

  &::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--control-color);
    left: 2px;
    top: 2.2px;
    transition: background-color 0.4s;
  }
}

.filter-country__control {
  --color: #bdbdbd;
  --control-color: #f8f8f8;
  appearance: none;

  &:checked + .filter-country__text {
    &::before {
      --color: hsl(256 76% 68% / 1);
      --border-color: hsl(256 76% 68% / 1);
    }

    &::after {
      left: 23.5px;
    }
  }

  &:hover + .filter-country__text,
  &:focus-visible + .filter-country__text {
    &::before {
      --color: hsl(256 55% 58% / 0.25);
      --border-color: hsl(256 76% 68% / 1);
    }
  }

  &:disabled + .filter-country__text {
    color: hsl(0 0% 74% / 1);

    &::before {
      --color: hsl(0 0% 89% / 1);
      --border-color: hsl(0 0% 89% / 1);
    }

    &::after {
      --control-color: hsl(0 0% 97% / 1);
    }
  }
}

这是我提出的解决方案，请问有没有更优的选项？

&:disabled.filter-country__control:checked + .filter-country__text {
    &::after {
      --control-color: hsl(0 0% 74% / 1);
    }
  }

优化方案 #

你的解决方案存在选择器冗余问题：代码嵌套在.filter-country__control内部，&已经代表这个类，无需重复写.filter-country__control，正确写法如下：

&:disabled:checked + .filter-country__text {
  &::after {
    --control-color: hsl(0 0% 74% / 1);
  }
}

以下是几种更简洁、符合层级限制的实现方式：

1. 极简相邻兄弟选择器写法

直接定位目标元素，层级仅为1，完全满足限制：

.filter-country__control:disabled:checked + .filter-country__text::after {
  --control-color: hsl(0 0% 74% / 1);
}

2. 合并状态选择器，整合到现有结构

在现有禁用状态样式下追加选中状态的处理，保持代码结构统一：

.filter-country__control {
  // ...原有代码

  &:disabled + .filter-country__text {
    // ...原有禁用样式

    // 追加禁用且选中的状态样式
    .filter-country__control:checked + & {
      &::after {
        --control-color: hsl(0 0% 74% / 1);
      }
    }
  }
}

3. 变量集中管理，提升可维护性

提前预设所有状态的变量值，通过选择器切换变量，后续修改颜色只需调整变量：

.filter-country__control {
  --color-default: #bdbdbd;
  --color-checked: hsl(256 76% 68% / 1);
  --color-disabled: hsl(0 0% 89% / 1);
  --control-color-default: #f8f8f8;
  --control-color-disabled: hsl(0 0% 97% / 1);
  --control-color-disabled-checked: hsl(0 0% 74% / 1);
  appearance: none;

  & + .filter-country__text {
    --color: var(--color-default);
    --control-color: var(--control-color-default);
  }

  &:checked + .filter-country__text {
    --color: var(--color-checked);
  }

  &:disabled + .filter-country__text {
    --color: var(--color-disabled);
    --control-color: var(--control-color-disabled);
  }

  &:disabled:checked + .filter-country__text {
    --control-color: var(--control-color-disabled-checked);
  }
}

// 保持.filter-country__text原有样式不变

内容的提问来源于stack exchange，提问作者Eva Fester