是否可以用另一个css类覆盖一个css类

我认为这个问题只与css有关。。。但我会给你一些背景：

我正在使用zk框架，我的zul页面中有一些组合框。。。ZK呈现其组件，并将其转换为具有一些预定义样式（css类）的html组件。。。我可以覆盖那些样式。。。但是我想用另一个css类覆盖整个css类，这样我就可以把我的css类只放在我想改变其样式的组件中

以下是如何创建组合框：

如您所见，它被转换为一个

输入

，带有一个名为z-combobox-input的css类

如果我直接覆盖该类，如下所示：

.z-combobox-input{
    border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff
}

.class-original{
    //some styles in here
}

.class-overriding{
    .class-original{
        //new styles in here
    }
}

<combobox id="combo2" style="border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff"/>

它将影响页面中的每个组合框，因此我得到：

所以我想知道是否存在这样一种方法：

.z-combobox-input{
    border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff
}

.class-original{
    //some styles in here
}

.class-overriding{
    .class-original{
        //new styles in here
    }
}

<combobox id="combo2" style="border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff"/>

因此，我可以将.class重写仅放在需要更改的组件中，而不是放在同一类型的每个组件中

<combobox id="newCombo" sclass="class-overriding" />

但我不能特别改变边界，就像这样：

.z-combobox-input{
    border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff
}

.class-original{
    //some styles in here
}

.class-overriding{
    .class-original{
        //new styles in here
    }
}

<combobox id="combo2" style="border:1px solid #000;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0     3px;-ms-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin:0;padding:4px 5px;line-height:14px;background:#fff"/>

它将随机id放入html组件

一些文件：

---

当您可以让ZK将元素渲染为

<input class="class-original class-overriding" />

这将覆盖

.class original

中的

背景色属性。所有未覆盖的属性都将取自
.class original
-CSS

编辑：刚刚检查了ZK实际渲染的内容。它是（使用您在小提琴中提供的类名）

第一个表示“具有两个类（
z-combobox
和
另一个类
）的所有内容”，第二个表示“具有类
z-combobox-input的所有内容”
，当您可以让ZK将元素渲染为

<input class="class-original class-overriding" />

这将覆盖
.class original
中的
背景色
属性。所有未覆盖的属性将取自
.class original
-CSS

编辑：刚刚检查了ZK实际呈现的内容。它是（使用您在小提琴中提供的类名）

第一个表示“两个类的所有内容（
z-combobox
和
另一个类
）”，第二个表示所有带有class
z-combobox-input
的类，它位于两个class
z-combobox
和另一个class
的类的内部，更新：根据您的需要，您可以使用
sclass
属性向任何元素添加类

所以，使用我在你截图中看到的代码



…您可以使用以下选择器为您放置的
类指定规则：

.v-combobox.whatever.z-combobox-input{
边框：1px实心#000；
边界半径：3px 0 3px；
边距：0；填充：4px 5px；
线高：14px；
背景：#fff；
}

有关更多信息，请使用

根据本指南，当您要添加应用于元素的默认样式时，应使用
sclass
；当您要重置默认样式时，应使用
zclass
属性（这意味着仅应用自定义类中定义的样式，而不应用该元素的默认样式）


初始答案：

这是
CSS
中最重要的原则，它被称为特异性

学习
CSS
意味着学习如何使用选择器及其特殊性，以便有选择地将规则应用于某些元素而不是其他元素。这是CSS的典型用途，而且完全可能

通过元素的id引用元素将更强大（从而覆盖）为其任何类指定的任何规则

为了理解特殊性，我建议将其作为一个起点。您还应该在您选择的搜索引擎中搜索特定性计算器

为了能够利用你所学到的关于特异性的一切，你需要理解和理解


对于特定的[：）]情况，您可能希望使用元素的
id
作为选择器，仅将规则应用于该元素。给定第一个示例中的
id
，这将起作用：

#vXgV3实数{
/*此处的规则将覆盖.z-combobox-input的规则
*对于id为=“vXgV3 real”的元素，并且仅针对该元素
*/
边框：1px实心#000；
边界半径：3px 0 3px；
边距：0；填充：4px 5px；
线高：14px；
背景：#fff；
}
更新：根据需要，您可以使用
sclass
属性向任何元素添加类

所以，使用我在你截图中看到的代码



…您可以使用以下选择器为您放置的
类指定规则：

.v-combobox.whatever.z-combobox-input{
边框：1px实心#000；
边界半径：3px 0 3px；
边距：0；填充：4px 5px；
线高：14px；
背景：#fff；
}

有关更多信息，请使用

根据本指南，当您要添加应用于元素的默认样式时，应使用
sclass
；当您要重置默认样式时，应使用
zclass
属性（这意味着仅应用自定义类中定义的样式，而不应用该元素的默认样式）


初始答案：

这是
CSS
中最重要的原则，它被称为特异性

学习
CSS
意味着学习如何使用选择器及其特殊性，以便有选择地将规则应用于某些元素而不是其他元素。这是CSS的典型用途，而且完全可能

通过元素id引用元素将更强大（因此会覆盖）任何rul