Html 在SASS中设置超级祖先的宽度

因此，我试图做的是在

input[type=checkbox]

和

input[type=checkbox]：checked

中设置

navbar vertical

类的宽度，但它没有任何效果。我想为

navbar vertical

类设置正常状态和选中状态的宽度。需要帮忙吗

.navbar-vertical {
    font-size: 1.2rem;
    .nav-item {
        &.nav-item-hamburger {
            label {
                cursor: pointer;
                input[type=checkbox] {
                    +i:before {
                        content: "\f0c9";
                    }
                    &:checked {
                        +i:before {
                            content: "\f00d";
                        }
                    }
                }
            }
        }
    }
}

---

以下是中的完整示例。

检查输入时，尝试更改

i

元素的宽度。大概是这样的：

.navbar-vertical {
  font-size: 1.2rem;
  .nav-item {
    &.nav-item-hamburger {
      label {
        cursor: pointer;
        input[type="checkbox"] {
          + i:before {
            content: "\f0c9";
          }
          &:checked {
            + i {
              margin-left: 5px;
              margin-right: 200px;
              text-align: left;
              &:before {
                content: "\f00d";
              }
            }
          }
        }
      }
    }
  }
}

.navbar垂直{
字号：1.2rem；
}
.导航条垂直.导航项目.导航项目-汉堡标签{
光标：指针；
}
.navbar垂直.nav-item.nav-item-hamburger标签输入[type=“checkbox”]+i:before{
内容：“\f0c9”；
}
.navbar垂直.nav-item.nav-item-hamburger标签输入[type=“checkbox”]：选中+i{
左边距：5px；
右边距：200px；
文本对齐：左对齐；
}
.navbar垂直.nav-item.nav-item-hamburger标签输入[type=“checkbox”]：选中+i:之前{
内容：“\f00d”；
}
.用户配置文件.用户配置文件图像{
网格面积：img；
高度：1公厘；
剪辑路径：圆形（50%时为50%50%）；
左边距：1 em；
最小高度：3rem；
}
.h-100vh{
高度：100vh；
}
.w-100vw{
宽度：100vw；
}
.flex-grow-1{
柔性生长：1；
}

你能在JSBin、codepen或类似的东西中发布你的完整代码吗？这样我们就可以看到它的作用了。我添加了codepen示例。我认为唯一的解决办法是使用

js

来完成。如果我在

nav

外取消复选框，我想这是可行的，对吗？我不同意这里的@SohamDasgupta。我认为任何可以用CSS而不是JS实现的事情都应该用CSS来完成。因此，继续重组您的标记，并使用

：checked

方法。当然，现在我相信总有办法。你只需要知道怎么做。这是一个很好的解决方法的例子。这隐式地改变了父对象的（动态）宽度——隐式的改变也是改变！做得好。