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

你可以做到

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

然后单独定义背景。这假设您的锚点的悬停默认情况下颜色与白色不同，您希望彩色类是白色的（不是以人类的方式！）。

或使用与您相同的风格

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

如果您有一个颜色的公共类，那么您可以始终定位该公共类

Answer 2

在这种情况下，我建议您只需删除&:hover { color: white; }规则，只要您已将其设置在a标记上，并且没有类似a:hover规则的内容可能会覆盖此规则

如果您有一些不同颜色的a:hover规则，只需在&:hover { color: white }块内添加a。

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

Answer 3

这取决于所需的结果。

你想要： 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; 
        }
    }
}

}

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

3 个答案: