更改兒童的特異性

我想將主題標籤集成到我的元素中，以便它們顯示爲不同的顏色。但由於css選擇器具有相同的css特性，因此最新版本會覆蓋先前定義的規則。更改兒童的特異性

這是顯示我的問題的例子：

<div class="red"> 
    <div class="box">This should be red</div> 
    <div class="yellow"> 
    ... 
     <div class="box">This should be yellow (nested in x levels under the div.yellow)</div> 
    ... 
</div>

，在這裏我的CSS

.box { width: 100px; height: 100px; } 
.yellow { background-color: yellow; } 
.red { background-color: red; }

包裝箱內應某上市，但只要它是另一種顏色的子子它應該被覆蓋。

感謝您的任何幫助！

來源

2009-12-15 jim red

這是動態的嗎？如果不是僅僅使用：class =「box yellow」作爲其類 – Treby 2009-12-15 07:55:05

它是黃色的。我猜這個問題在其他地方。可能涉及。黃色浮動或.box被絕對定位的所有內容。無論問題出在哪裏，它都不適用於你向我們展示的代碼。 – Quentin 2009-12-20 14:02:04

-1

您可能需要使用CSS的重要關鍵字如：

.yellow { background-color: yellow !important;}

來源

2009-12-15 07:57:22 Sarfraz

這將覆蓋設置，但不好的做法。 – 2009-12-15 08:31:58

我不認爲它會解決問題。如果你只是把重要的東西放在黃色課堂上，那麼黃色總是優先考慮，不管嵌套。如果你把它放在所有的顏色類上，那麼你就回到了你開始的地方。 – 2009-12-20 14:00:59

你真不該這樣做，讓 - 如果你的主題變化，然後突然事情yellow類實際上可能！藍色，例如。我建議找到一種命名事物的通用方式（即使它只是colour1,colour2,colour-highlight ...），然後指定這些樣式。然後，您可以查看設計頁面的方式，並根據需要制定規則（通過使用!important或使規則更具體，例如.colour1變爲.box .colour1或div.colour1）。

來源

2009-12-15 07:59:51 DMI

感謝您的回覆。我同意這樣做是不好的做法。代碼只是一個簡單的例子，因爲我的元素和代碼更復雜。 – 2009-12-15 11:07:15

嘗試：