css - 如何将相同的样式应用于所有直接子类？

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、.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 {
        &.orange, &.black, &.topaz{ 
            color: white; 
        }
    }
}