主页 / 问题 / 1588966
Accepted
drako black
Asked:2024-07-31 12:48:14 +0000 UTC2024-07-31 12:48:14 +0000 UTC

通过 CSS 影响嵌套元素的父容器属性

  • 772

朋友们！

我们需要您的帮助来解决一个问题：

所以，我有一个复选框：

<label class="checkbox">
  <input type="checkbox" id="btn_cheats" class="chek">
  <span class="chek-label"></span>
  <span class="on-left">ON</span>
  <span class="off-right">OFF</span>
<label>

使用 CSS 中所有指定的样式和引用，一切都运行良好，直到我尝试在旧版本的浏览器上运行它，结果发现这个表达式

.checkbox:has(.chek:checked) {
  background-color: lime;
}

在那里不起作用，因为:has它仍然太新且处于实验阶段：

所以，问题是，我们可以用什么替换这个表达式，以便复选框在旧版浏览器中正确更改颜色？？？我尝试过媒体，但显然这件事不适用于课程，或者我做错了什么：

@media (.chek:checked) {
   .checkbox {
    background-color: lime;
  }
}
css

1 个回答

  1. Best Answer

    事实上，我找到了以下解决方案：

    1. 添加另一个span到 HTML
    <label class="checkbox">
            <input type="checkbox" id="btn_audio" class="chek">
            <span class="chek-label"></span>
            <span class="checkbox-span"></span>
            <span class="on-left">ON</span>
            <span class="off-right">OFF</span>
         <label>
    1. 为其分配了一个新类，我将 CSS 中的属性复制到该类中checkbox：
    .checkbox-span {
  position: absolute; /* вместо релатив использовал абсолют, так как он вложенный */
  display: block;
  width: 70px;
  height: 30px;
  top: 0px;
  background-color: red;
  border-radius: 50px;
}

    然后就可以使用以下结构：

    .chek:checked ~ .checkbox-span {
  background-color: lime;
}

    这个解决方案可能无法解决旧版浏览器的所有问题，但至少它可以在 2-3 年前的浏览器上运行......

    • 0

相关问题