什麼是css/html`root`元素？

我剛剛開始使用NetBeans IDE（6.9.1），並使用它將樣式表添加到正在進行的網站中。什麼是css/html`root`元素？

令我驚訝的是，自動添加一個元素：

root { 
    display: block; 
}

環顧四周，我能找到的關於:root僞類，但對root元素本身沒有的一些信息。

什麼是root元素，它有什麼用處？

來源

2010-10-12 jeroen

在HTML中沒有元素叫做根。 html元素本身是「根元素」（這是給元素的術語，它是文檔中所有其他元素的祖先），但這將與html { }相匹配。

但是，請參閱the :root pseudo-class（帶冒號）。

來源

2010-10-12 16:22:54 Quentin

從這裏：http://www.quirksmode.org/css/root.html

的：根僞元素選擇根中的頁面，即，所有塊。初始包含塊。在HTML 這顯然是<html>元素

測試樣式表：

:root {  
    background-color: #6374AB; 
    padding: 50px; 
}

如果：根選擇作品的頁面是藍色的左側和右側列，白中間的列被偏移50個像素。

來源

2010-10-12 16:22:50 David

謝謝，that's我發現了什麼爲好，但我想知道的'root'元素的NetBeans插入，而不是僞元素。 – jeroen 2010-10-12 18:36:29

由於沒有這樣的html標籤，並且它看起來沒有記錄在任何可以找到它的地方，所以我會猜測它是作爲示例代碼來向您展示css應該如何尋找新手。我可以告訴你的是，它在模板中是有限的，如果你不喜歡「tools - templates」，然後進入「Web」文件夾，你可以自己編輯模板。我不認爲它是一個「錯誤」，因爲它顯然是故意的。更像是「無證無用的功能」。 – David 2010-10-12 20:00:05

我想你是對的，這不是一個真正的bug;我改變了模板，所以我不會再看到它。 – jeroen 2010-10-12 21:36:40

root是NetBeans IDE樣式表模板中任何元素的佔位符。它就像微積分中的虛擬變量。請將光標放在y上：在root { display: block; }中刪除y：並鍵入y。 IDE彈出到提供有價值信息的指令窗口中。它們對於根的意義僅僅是一個虛擬變量。例子是em {display: inline; }此外，根是你開始的地方，樹枝和樹葉的最深的HTML樹的祖先。因此，在開始時，默認情況下有一個框，所有分支和葉子都遵循該默認設置，除非您將它們的默認顯示更改爲其他值，例如內聯。

來源

2011-07-31 09:20:56

的:root元素是誰沒有父母的元素，所以我想在HTML中唯一的根元素是<html>元素.. 所以當你使用:root選擇款式，它將樣式整個文檔。

（我在這裏找到更多信息：http://webdesign.about.com/cs/css/qt/tipcsschild.htm和這裏：http://www.w3schools.com/cssref/sel_root.asp）。

來源

2012-11-16 14:18:26 mariamtin

root和html之間有區別，根僞類是一個CSS3實體，並且不影響較舊的瀏覽器（MSIE 8或更少，Opera 9。4個或更少）

html /* for all web browsers */ 
{ 
    color:red; 
}

你有字根如下之前加上一個冒號...

:root /* for CSS3 web browsers: Chrome, Firefox, MSIE 9+, Safari, Opera 9.5+ */ 
{ 
    color:blue; 
}

如果你使用這兩個CSS線，MSIE版本8或以下（或MSIE在兼容模式下運行時，9+顯示爲MSIE 7）會顯示紅色文本，其他大多數瀏覽器都會顯示藍色文本。

文檔和「根」的規格可以在Mozilla開發者網絡中找到：https://developer.mozilla.org/en-US/docs/Web/CSS/:root

來源

2014-06-01 18:23:36

：根可用於聲明CSS變量

的情況下，任何人發現這個老問題和需要的信息， :root往往是在示例中使用聲明CSS自定義屬性或「變量」，在整個文檔變得可用，例如：

:root { 
    --darkGreen: #051; 
    --myPink: #fce; 
} 

section { 
    color: var(--darkGreen); 
    background: var(--myPink); 
} 

article h3 { 
    color: var(--darkGreen); 
}

但是，任何元素都可以用作CSS變量的選擇器（而不僅僅是:root），所以html或body也可以使頁面上的任何元素都可以訪問它們。如果任何人有充分的理由使用:root，我想知道它。

參考文獻：

來源

2018-02-03 12:46:45

什麼是css/html`root`元素？

回答

：根可用於聲明CSS變量

參考文獻：

相關問題