类属性的空格中提供的两个类名称的CSS规则 [英] CSS rule for two class names provided in spaces for the class attribute

问题描述

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

1. I have a button component in extjs.
2. For this component CSS has been set like class='one btn-exit-cls three four five x-menu-active' .
3. in that the class name btn-exit-cls is unique.
4. when this button is clicked a menu appears which adds the CSS class name x-menu-active to the class

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

I wanted to set rule for btn-exit-cls and x-menu-active combining both. So that I can apply menu active style for various buttons.

我期望的是

.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.我只想覆盖.

I don't want to modify the existing CSS. I just want to override.

推荐答案

您只需要删除类之间的空格，就可以这样:

you just need to remove the spaces between classes, so it will be like this :

.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 的元素的后代.例如此代码:

---

So..

Your CSS code .btn-exit-cls .x-menu-active means : Select all elements with the class name x-menu-active that are decedents of the element with a class name of btn-exit-cls. such as this code :

<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 的类名称的元素.例如此代码:

But the other code .btn-exit-cls.x-menu-active means : Select the element which has a class name of btn-exit-cls and also a class name of x-menu-active. such as this code :

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

这两个类之间的空间很小，因此其作用差异很大

This small space between the two classes makes a huge difference in what it does

希望这对您有帮助...

Hope this will help you ...

这篇关于类属性的空格中提供的两个类名称的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！