可以覆蓋一個CSS類另一個CSS類

Question

我認爲這個問題只與CSS相關的...但我會給你一些背景：

我與ZK框架內工作，我有一些組合框我的zul頁面... ZK渲染其組件並將它們轉換爲具有一些預定義樣式（css類）的html組件...我可以覆蓋這些樣式...但是我想用另一個覆蓋整個css類，因此我可以我的CSS類只在我想改變其風格的組件。

這是怎樣一個組合框創建：

正如你所看到的，它是變成一個input用CSS類名爲Z-組合框中輸入

如果我覆寫類直接，就像這樣：

.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 
} 

它將afect每一個組合框的頁面，結果我得到：

所以我想知道是否存在的方式做這樣的事情：

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

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

所以我可以把我的.class，只覆蓋在我需要改變，而不是組件在同一類型的每個組件中。

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

我做this小提琴，如果你想嘗試的解決方案。

我看到this的問題，顯然這是不可能的......所以：是否有另一種方法來實現呢？

謝謝。

UPDATE

我不能使用的dinamically生成的ID（在這種情況下， 「vXgV3真實」）。

我可以通過把一個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 documentation，您可以使用sclass屬性將類添加到任何元素。

所以，用我在你的截圖中看到的代碼...

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

...你就可以使用以下的選擇來指定<combobox> ES放置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。

根據本指南，如果要在重置默認樣式時添加到應用於元素的默認樣式和zclass屬性，則應該使用sclass（這意味着只有您在自定義類中定義的內容才適用，而不是該元素的默認樣式）。

---

初步答案：

這是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; 
} 

Answer 2

當你可以得到ZK渲染元素

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

您可以使用下面的CSS以僅對其上具有兩個類的元素進行樣式設計。

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

這將從.class-original覆蓋background-color財產。您不覆蓋的所有屬性將取自.class-original -CSS

編輯：剛纔檢查了ZK實際呈現的內容。這是（與類名，你在擺弄提供）

<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*/ 
} 

第一個意思，「具有兩個類（z-combobox和another-class）拍賣」第二個的意思是「與z-combobox-input類一切它是裏面的東西有兩個類z-combobox和another-class