如何将相同的样式应用于所有直接的儿童课程？

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; } 
      } 
     } 
    } 
}