less &進行選擇判斷css的樣式

先說&在less寫 

.parent{
    .child{}
    &.and{}            
}
在css就是

.parent.child{}//父子關系

.parent.and{}//並關系 

用到這個方法是因為用到一個單選按鈕有默認選中事件，但是因為按鈕是使用了圖片來切換選中狀態，所以就是我能想到的就是在css里進行切換

.rad_bac{
     margin: 30px auto;
     width: 80px;
     height: 80px;
     background-size:100% 100%;   
     &.onmethod{
        .all{
           display: none;
            }
        .allon{
           display: block;
            }
     } 
      .allon{
           display: none; 
      }  
}

在html

//默認選中的按鈕
<div class="rad_bac onmethod">
     <div class="rad_bac all"></div>
     <div class="rad_bac allon"></div>
</div>
//待選擇的按鈕

<div class="rad_bac">
     <div class="rad_bac all"></div>
     <div class="rad_bac allon"></div>
</div>

一個按鈕，上面的onmethod 是選中狀態的方法，里面有兩種狀態的div都寫在這個按鈕div中，

allon是選中的時候的狀態，一開始是選中的隱藏，沒選的出現，此時大家都是沒有點擊的狀態，當 按鈕和選中的方法同時出現時 沒選中的div顯示，選中的div隱藏

所以相當於是一個if方法，當某種情況出現時，有不同的展示