CSS自定義屬性如何級聯？

比方說，我有以下的CSS：CSS自定義屬性如何級聯？

:root { --color: blue; } 
div { --color: green; } 
#alert { --color: red; } 
* { color: var(--color); }

和我的標記是：

<p>I inherited blue from the root element!</p> 
<div>I got green set directly on me!</div> 
<div id="alert"> 
    While I got red set directly on me! 
    <p>I’m red too, because of inheritance!</p> 
</div>

我的問題是有沒有上面的CSS轉換爲：

body { 
    color: blue; 
} 
div { 
    color: green; 
} 
#alert{ 
    color: red; 
}

還是有一個附加

* { 
    color: red; 
}

如果沒有變量，通用選擇器將在所有元素上應用相同的CSS。這是否會改變，造型是否依賴於元素？

我還有一個問題是，如果:root轉化爲body在CSS中。

這裏是一個CodePen演示：http://codepen.io/anon/pen/RrvLJQ

來源

2016-02-13 SanJeet Singh

正如您在標題中正確指出的那樣，自定義屬性級聯。實際上，這就是爲什麼該模塊被稱爲CSS定製屬性的級聯變量。這意味着您的自定義屬性--color按照每個元素進行評估，就像其他任何CSS屬性一樣。在應用到你的元素的實際樣式而言，你真的只能是：

* { 
    color: var(--color); 
}

的var(--color)值，然後根據如何--color財產級聯評估每一個元素。所以它遵循如下：

body元素有一個藍色的前景。
任何div元素都有一個綠色的前景。
ID爲「alert」的元素具有紅色前景。
因爲*的定義沒有--color，所以默認爲inherited。因此所有其他元素從其父元素繼承--color：body > p繼承自body，變爲藍色，並且#alert > p繼承自#alert，變爲紅色。

如果你確實想表達的CSS方面的級聯值，你可以說，它的含義如下：

:root { 
    color: blue; 
} 
div { 
    color: green; 
} 
#alert { 
    color: red; 
} 
* { 
    color: inherit; 
}

但僅因爲原來的CSS包含一個明確的* { color: var(--color); }確保每個元素的color映射到--color。

說明，對你的代碼來自an example within the spec，其本身描述如下：

如果自定義屬性被多次聲明，標準級聯規則有助於解決這個問題。變量總是從相關的自定義屬性的計算值繪製的相同元素

還有一個問題我是，如果:root轉化爲body在CSS上。

:root沒有轉化爲在CSS中的任何元素，因爲CSS是文件語言無關。
:root不會轉換爲HTML中的body;它對應於html。

來源

2016-02-13 03:21:23 BoltClock

讓我們先從這一點：

還有一個問題我是，如果:root轉化爲body在CSS。

答：

的:root選擇可以讓您針對最高級別的「父」元素在DOM，或文檔樹。它在CSS 選擇器級別3規範中定義爲「結構性僞類」，這意味着它是用於根據其與父級關係和兄弟內容的關係對內容進行樣式設置。在絕大多數情況下，您可能會遇到，:root指的是網頁中的<html>元素。

Source

那麼這個CSS瓦爾：

:root { --color: blue; } 
div { --color: green; } 
#alert { --color: red; } 
* { color: var(--color); }

將轉化（取決於你的DOM - 如上所述），在這樣的事情：

html /* this is :root*/ { 
 
    color: blue; 
 
} 
 
div { 
 
    color: green; 
 
} 
 
#alert { 
 
    color: red; 
 
} 
 
* { 
 
    color: inherit; /*this will inherit blue due to HTML is set to blue */ 
 
}

<h1>blue</h1> 
 
<div>green</div> 
 
<span id="alert">red</span> 
 
<span>blue</span>

來源

2016-02-13 03:11:11 dippas

請記得鏈接到您的資料來源。 – BoltClock

是@BoltClock我仍然在編輯我的答案。 – dippas

你不應該等到這樣做。人們可以在發佈後很快回復*。在您有機會編輯您的答案之前，您的帖子可能已被標記爲刪除。 – BoltClock

CSS自定義屬性如何級聯？

回答

相關問題