如何將相同的樣式應用於所有直接的兒童課程？

Question

在less我有以下幾點：

.some-class{ 
    > li{ 
     a{ 

      color: white; 
      background: @fti-lightgrey; 
      border-radius: 0px; 
      padding: 1px 15px; 

      // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura) 
      &.orange{ 
       &:hover{ background: @fti-orange; } 
       &:hover{ color: white; } 
      } 
      &.black { 
       &:hover{ background: black; } 
       &:hover{ color: white; } 
      } 
      &.topaz{ 
       &:hover{ background: @fti-topaz; } 
       &:hover{ color: white; } 
      } 

     } 
    } 
} 

如何避免編寫&:hover{ color: white; }多次？
有沒有辦法將這一行應用到a標記內某處的所有直系階段後代？

Answer 1

這取決於期望的結果。

你想要： 1）白色懸停顏色默認情況下，無論它是否也有.orange，.black或.topaz類之一？

.some-class{ 
> li{ 
    a{ 

     color: white; 
     background: @fti-lightgrey; 
     border-radius: 0px; 
     padding: 1px 15px; 

     // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura) 
     &.orange{ 
      &:hover{ background: @fti-orange; } 
     } 
     &.black { 
      &:hover{ background: black; } 
     } 
     &.topaz{ 
      &:hover{ background: @fti-topaz; } 
     } 

    } 
    a:hover{ color: white; } 
} 

}

2）或者你只希望它是白色的懸停如果也有.orange之一。黑，.topaz類？

.some-class{ 
> li{ 
    a{ 

     color: white; 
     background: @fti-lightgrey; 
     border-radius: 0px; 
     padding: 1px 15px; 

     // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura) 
     &.orange{ 
      &:hover{ background: @fti-orange; } 
     } 
     &.black { 
      &:hover{ background: black; } 
     } 
     &.topaz{ 
      &:hover{ background: @fti-topaz; } 
     } 

    } 
    a:hover { 
     &.orange, &.black, &.topaz{ 
      color: white; 
     } 
    } 
} 

}

Answer 2

你可以做

a:hover { 
    &.orange, 
    &.black, 
    &.topaz { color: white; } 
} 

然後單獨定義背景。這是假設您的錨點的懸停默認顏色不同於白色，並且您希望彩色類別爲白色（不是以人種方式！）。

或使用相同的風格，你有

a { 
    &.orange, &.black, &.topaz { 
     &:hover { color: white; } 
    } 
} 

如果您對顏色的普通類，那麼你總是可以瞄準的是普通類

Answer 3

在這種情況下，我會建議簡單地刪除&:hover { color: white; }規則，只要您已將其設置爲a標記，並且沒有類似a:hover的規則可能會覆蓋此規則。

如果你有一些不同的顏色a:hover規則，只需在a區塊內添加&:hover { color: white }即可。

.some-class{ 
    > li{ 
     a{ 
      color: white; 
      background: @fti-lightgrey; 
      border-radius: 0px; 
      padding: 1px 15px; 

      // a color for the partcular tab that is chosen. (the color for each tab can be set inside mura) 
      &.orange{ 
       &:hover{ background: @fti-orange; } 
      } 
      &.black { 
       &:hover{ background: black; } 
      } 
      &.topaz{ 
       &:hover{ background: @fti-topaz; } 
      } 
     } 
    } 
}