css - 如何在没有 !important 的情况下更改我的 css less 代码

Question

我有这样的东西:

table {
thead {
    th{
        background-color: @grey-1;
        ...
    }
}
position: relative;
&.option1 {
    thead {
        th {
            background - color: @grey-2;
            ...
        }
    }
} 
&.option2 {
    thead {
        th {
           background - color: @grey-3;
           ...
        }
    }
}
&.option3 {
    thead {
        th {
            background - color: @grey-4;
            ...
        }
    }
}}

我要插入另一个类:

.clean {background-color: transparent;}

我的意思是让这张 table 有一个透明的背景:

<table class = "option1 clean"> </table>

简而言之，我需要通过插入 .clean 类来更改我的 less 文件，以便“table .option1 .clean”具有透明背景。它必须在不将 .clean 插入每个 .optionX 类并添加 !important 的情况下完成。

有什么选择吗？

非常感谢!

Answer 1

只需在选项下方(在 table 下，而不是在每个单独的选项内)添加 .clean 的规则:

table {
    &.optionX {
        ...
    }

    &.clean {
        thead {
            th {
                background-color: transparent;
            }
        }
    }
}