Sass - 如何選擇收音機輸入的標籤？

我試圖將一個背景顏色應用於單選按鈕的標籤，當它處於：checked狀態時。Sass - 如何選擇收音機輸入的標籤？

編輯：實際上，這就是我想實現的，但有多個選擇： 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

來源

2014-12-26 Aaron Benjamin

有上的label沒有:checked狀態，僅在對應的input字段。

因此，您應該將輸入字段移至與標籤相同的DOM級別。

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

然後在CSS的部分，你可以這樣做：

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

如果由於某種原因，你不能改變的HTML結構，唯一的解決辦法左邊是JavaScript的。

看到一個similar technique here與~操作

來源

2014-12-26 05:12:42

我能夠選擇的兄弟：「ID」導航到在DOM：使用檢查無線電輸入。有沒有辦法導航回來？ –

不，僅適用於選擇器和/或x等級的深度。但'+'和'〜'綁定到同一級別。可以說，你不能回到樹上。 –

Sass - 如何選擇收音機輸入的標籤？

回答

相關問題