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

Question

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

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

这是组合框的创建方式：

正如您所看到的，它变成了input，其中包含一个名为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
    }
}

所以我可以将我的.class-overriding只放在我需要更改的组件中，而不是放在同一类型的每个组件中。

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

如果您想尝试解决方案，我会使this小提琴。

我看到了this问题，显然这是不可能的......所以：还有另一种方法可以实现吗？

谢谢。

更新

我无法使用动态生成的id（在本例中为“vXgV3-real”）。

我可以通过放置css类或使用标记style来修改组合框中的一些属性：

<combobox id="combo1" style="background: red" />

但我不能特别改变这个边界，如：

<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"/>

因为当它是渲染时（当zk将其组件更改为html组件时），它将转为：

因此，当zk将combobox组件更改为：

时

<span id="nZEQo" style="width:80%;" class="myCombo z-combobox">
    <input id="nZEQo-real" class="z-combobox-input" autocomplete="off" value="" type="text" style="width: 269px;">
    <a id="nZEQo-btn" class="z-combobox-button">
        <i class="z-combobox-icon z-icon-caret-down"></i>
    </a>
    <div id="nZEQo-pp" class="z-combobox-popup myCombo" style="display:none">
        <ul id="nZEQo-cave" class="z-combobox-content"></ul>
    </div>
</span>

它将随机id放入html组件。

Fiddle with this particular part

一些文档：

Customize Look and Feel of ZK Components Using CSS3 - Part 2

ZK Component Reference>Input>Combobox

Answer 1

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

时

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

您可以使用以下CSS来仅设置对其具有两个类的元素的样式。

.class-overriding.class-original {
    background-color: red;
}

这会覆盖background-color的{​​{1}}属性。您不会覆盖的所有属性都将取自.class-original - CSS

编辑：刚检查了ZK实际呈现的内容。这是（你在小提琴中提供的班级名称）

.class-original

鉴于此，根据您是要设置外部范围还是内部输入的样式，您可以分别使用其中一个CSS规则：

<span class="another-class z-combobox">
    <input class="z-combobox-input" />
</span>

第一个意思是“同时拥有两个类的所有内容（.z-combobox.another-class { /*styles for the outer span*/ } .z-combobox.another-class .z-combobox-input { /*styles for the outer span*/ } 和z-combobox）”，第二个意思是“包含类another-class的所有内容，其中包含两个类z-combobox-input 1}}和z-combobox

Answer 2

更新：根据ZK documentation，您可以使用sclass属性向任何元素添加类。

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

 <vbox>
   <combobox>
   <combobox sclass="whatever">
   <combobox>
 </vbox>

...您将能够使用以下选择器为您放置<combobox>课程的whatever指定规则：

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

有关更多信息，请使用this guide。

根据本指南，如果要添加到应用于元素的默认样式和sclass属性，当您想要重置默认样式时，应使用zclass（这意味着只需要您将应用您的自定义类中的define，而不是该元素的默认样式。）

初步回答：

这是CSS中最重要的原则，它被称为 特异性 。
学习CSS意味着学习如何使用选择器及其特异性，以便有选择地将规则应用于某些元素而不是其他元素。这是CSS通常使用的内容，而且完全有可能。

通过其id引用元素将更强（并因此覆盖）为其任何类指定的任何规则。

为了理解特异性，我建议this article作为起点。您还应该在所选的搜索引擎中搜索特异性计算器。

为了能够使用您了解特异性的所有内容，您需要了解CSS Selectors和CSS Combinators。

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

#vXgV3-real {
  /* the rules here will override the rules for .z-combobox-input
   * for the element with id="vXgV3-real" and only for that element 
   */
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}