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

Question

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

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

这是组合框的创建方式：

如您所见，它变成了一个 input 和一个 css class 称为 z-combobox-input

如果我直接覆盖 class，像这样：

.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 fiddle 如果你想尝试一个解决方案。

我看到 this 问题，显然这是不可能的...那么：还有其他方法可以实现吗？

谢谢。

更新

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

我可以通过放置 css class 或使用标签 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 的元素的样式。

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

这将覆盖 .class-original 中的 background-color 属性。您不覆盖的所有属性将从 .class-original-CSS

中获取

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

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

鉴于此，根据您是要设置外部跨度还是内部输入的样式，您可以分别使用这些 CSS-规则之一：

.z-combobox.another-class {
  /*styles for the outer span*/
}
.z-combobox.another-class .z-combobox-input {
  /*styles for the outer span*/
}

第一个意思是"Everything with both classes (z-combobox and another-class)"，第二个意思是“所有带有class z-combobox-input的东西都在class和z-combobox里面和 another-class

Answer 2

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

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

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

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

.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 属性（这意味着仅您在自定义 class 中定义的内容将适用，而不是该元素的默认样式）。

初步回答：

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

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

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

为了能够使用你学到的关于特异性的一切知识，你需要理解 CSS Selectors and 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;
}

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

Is possible overwrite a css class with another css class

css

zk