如何创建一个需要元素中多个类的CSS选择器？

Question

我有以下LESS：

        button {
            background: #eee;
            border: 1px solid #BBB;
            color: #000;

            &:hover:not(.nohover) {
                background: #0007d5;
                border: 1px solid #0007d5;
                color: white;
            }

            &.correct {
                background-color: #00ff00;
                border: 1px solid #00ff00;
            }

            &.incorrect {
                background-color: #ff0000;
            }

            &.current {
                background-color: #000;
                border: 1px solid #000;
                color: white !important;
            }
        }

我对如何添加多个其他类感到困惑。如何使按钮具有一个当前类并且正确的文本颜色为＃00ff00并且如果类是当前和不正确的文本颜色将是＃ff0000？

Answer 1

使用LESS，您可以使用＆amp;选择器将类选择器堆叠到同一元素。

button {
    &.current {
        background-color: #000;
        border: 1px solid #000;
        color: white !important;
        &.correct {
            // add CSS here for button.current.correct
        }
        &.incorrect {
            // add CSS here for button.current.incorrect
        }
    }
}

或者，如果你不喜欢更深的嵌套：

button {
    &.current.correct {
        // add CSS here for button.current.correct
    }
    &.current.incorrect {
        // add CSS here for button.current.incorrect
    }
}