對於未知的CSS繼承背景顏色實際上是透明的

我使用<ul>和<li>元素創建了一個類似標籤的功能，並且我注意到這種意外行爲與CSS background-color: inherit。
人們會認爲inherit實際上並不意味着transparent，而是child.background-color == parent.background-color（原諒僞代碼）。對於未知的CSS繼承背景顏色實際上是透明的

我的代碼很簡單，但我有一個問題：我正在開發變量條件。這意味着我永遠不會知道背景顏色將用於我的代碼，我不想介紹自己的代碼。

我準備了一個JSFiddle，其中背景是在頁面加載時隨機設置的，以模仿我的代碼的目的地的隨機性。顯而易見的問題是，活動選項卡在預設背景顏色時看起來很糟糕。所以，我將它改爲background-color: inherit。（見JSFiddle 2）

雖然這顯然解決了背景問題，該元素的下方（cg_content）邊界又開始呈現，因爲inherit財產，就像transparent，而不是它做什麼時，有一組背景 - 顏色。

問題是：有沒有辦法讓它繼承沒有Javascript的實際背景顏色？
如果沒有，您是否可以提出一個更好的方法來使這些標籤在沒有預設顏色的情況下看起來很好？

P.S .:內容<div>不應該是<li>元素的子元素，因爲這些選項卡共享一些內容。 P.S.2：我不能說得更清楚，我明顯知道如何用JS做到這一點。我只是不想。

來源

2013-10-27 mavrosxristoforos

設置background-color: inherit確實使其採用父元素的背景顏色。

它正在transparent的原因是因爲母體的背景顏色（li）是transparent（默認值）。

你的第二個JSFiddle中背景色設置的唯一其他元素是#unknown_background，它是主播的曾祖父母。

將div, ul, li { background-color: inherit; }添加到樣式表的末尾，背景將一直向下繼承，邊框將不顯示。

來源

2013-10-27 09:45:25 Quentin

我也建議擺脫ul的容器div。刪除它根本不會改變結果，您不必生成新的CSS規則和另一個具有ID的元素。 – Cadoc

謝謝@Quentin。這確實是我的代碼簡化版本的解決方案。但在現實世界的例子中，我的代碼可能是具有實際背景色的元素的偉大孫子的一部分，我對它們之間的元素沒有CSS控制。有什麼想法呢？ – mavrosxristoforos

在CSS中，沒有辦法讓元素從某個任意其他元素（甚至祖先）獲取其背景。您可以是特定的，也可以從父級繼承。 – Quentin

對於未知的CSS繼承背景顏色實際上是透明的

回答

相關問題