css - Sass - 如何选择 radio 输入的标签？

Question

当单选按钮处于 :checked 状态时，我试图将背景色应用于单选按钮的标签。

编辑:这基本上是我想要实现的目标，但有多个选择: https://mdn.mozillademos.org/files/3706/expandable-elements.html

下面是完整的标记。我似乎无法正常工作的是:

label

  &:hover
    text-decoration: underline
    cursor: pointer

  &:checked
    background: white
    color: blue

我已经尝试了几种不同的技术，例如向 #shop + label 添加选择器，但这似乎也不起作用。

任何帮助或想法将不胜感激!!

干杯。

html

<!-- Menu -->
<ul class="nav-p">
<li><label for="shop">Shop</label></li>
<li><label for="support">Support</label></li>
<li><label for="mystuff">myStuff</label></li>
</ul>

<!-- Sub Menu -->
<input type="radio" id="shop" name="menu">
<ul class="nav-s">
<li>Shop - 1</li>
<li>Shop - 2</li>
<li>Shop - 3</li>
</ul>

<input type="radio" id="support" name="menu">
<ul class="nav-s">
<li>Support - 1</li>
<li>Support - 2</li>
<li>Support - 3</li>
</ul>

<input type="radio" id="mystuff" name="menu">
<ul class="nav-s">
<li>myStuff - 1</li>
<li>myStuff - 2</li>
<li>myStuff - 3</li>   
</ul>

萨斯

.nav-p
        +clearfix

        li
          list-style: none
          float: left
          display: block
          padding: 12px 15px 15px 15px
          margin-top: 3px
          +border-top-radius(3px)

          color: white
          font:
            size: 15px
            weight: 100

          label

            &:hover
              text-decoration: underline
              cursor: pointer
            &:checked
              background: white
              color: blue

#shop + .nav-s
  display: none

#shop
  display: none
  &:checked + .nav-s
    display: block

#support + .nav-s
  display: none

#support
  display: none
  &:checked + .nav-s
    display: block

#mystuff + .nav-s
  display: none

#mystuff
  display: none

  &:checked + label
    background: blue

  &:checked + .nav-s
    display: block


.nav-s
  background: white
  +border-bottom-radius(5px)
  padding: 5px 10px

  li
    list-style: none
    display: inline-block
    padding: 10px
    color: $linkColor

    &:hover
      cursor: pointer
      text-decoration: underline

Answer 1

在标签上没有:checked状态，只有在相应的input字段上。

因此，您应该将输入字段移动到与标签相同的 DOM 级别。

<label for="myId"></label>
<input id= "myId" type="radio" />

然后在 CSS 部分你可以做:

label + input:checked
    background-color: #f00;

如果出于某种原因您无法更改 HTML 结构，那么剩下的唯一解决方案就是 JavaScript。

查看 similar technique here使用 ~ 运算符