如何创建一个需要元素中多个类的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,您可以使用&选择器将堆叠类选择器保持在同一元素中.

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