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

Question

在较少中，我有以下内容：

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

}

或者你只希望它在悬停时是白色的，如果它也有一个.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; 
        }
    }
}

}

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