用于class属性的空格中提供的两个类名的CSS规则

Question

1. 我在extjs中有一个按钮组件。
2. 对于此组件，CSS已设置为class='one btn-exit-cls three four five x-menu-active'。
3. 因为班级名称btn-exit-cls是唯一的。
4. 单击此按钮时会出现一个菜单，其中将CSS类名x-menu-active添加到班级

我想为btn-exit-cls和x-menu-active两者组合规则。这样我就可以为各种按钮应用菜单活动样式。

我期待的是

.btn-exit-cls .x-menu-active {
//some css
}

.btn-delete-cls .x-menu-active {
//some css
}

.btn-add-cls .x-menu-active {
//some css
}

我不想修改现有的CSS。我只想覆盖。

Answer 1

你只需要删除类之间的空格，所以它会是这样的：

.btn-exit-cls.x-menu-active {
    //some css
}

.btn-delete-cls.x-menu-active {
    //some css
}

.btn-add-cls.x-menu-active {
    //some css
}

---

所以..

您的CSS代码.btn-exit-cls .x-menu-active表示： 选择类名为 x-menu-active 的所有元素，这些元素的名称为 btn-exit-cls 的 decedents 。比如这段代码：

<div class="btn-exit-cls">
    <div class="x-menu-active">
        //some HTML
    </div>
</div>

但其他代码.btn-exit-cls.x-menu-active表示： 选择类名为 btn-exit-cls 的元素，以及 x-menu-active 的班级名称。比如这段代码：

<div class="btn-exit-cls x-menu-active">
    //some HTML
</div>

这两个类之间的这个小空间对它的作用产生了巨大的影响

希望这会对你有帮助......

Answer 2

如果您想定位具有两个类的元素，则必须在它们之间没有空格的情况下编写它们：

.btn-exit-cls.x-menu-active {
    ...
}

否则，如果你喜欢这样：

.btn-exit-cls .x-menu-active {
    ...
}

您定位的是类x-menu-active的元素，这些元素是类btn-exit-cls的元素的后代