CSS在外部.css文件中對「根」的處理方式有所不同

我對CSS非常陌生，並且發現了一個我不明白的細微差別。我試圖設置視口背景顏色，並在本例中使用紅色。CSS在外部.css文件中對「根」的處理方式有所不同

如果我在一個外部.css文件使用下面的代碼，然後它的「頭」部分添加到我的HTML文件，視口的顏色是不會改變的 - 它是標準的白色背景：

==== my-external-css-file.css === 
root 
{ 
    display: block; 
    background-color:RGB(255,0,0);  
} 


==== my index.html file ==== 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>theRed</title> 
    <meta name="viewport" content="user-scalable=no, width=device-width"/> 

    <link rel="stylesheet" href="my-external-css-file.css" 
</head>

我在學習使用書籍的CSS，書中使用的是不起作用的外部.CSS文件方法。所以我決定放棄外部CSS文件，並將根目錄的顏色變爲直接放在我的index.html文件的「head」部分 - 如果我將的根顏色直接放在的index.html文件中，整個視口背景是紅色的預期：

 ==== my index.html file ==== 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>theRed</title> 
    <meta name="viewport" content="user-scalable=no, width=device-width"/> 

    <style type="text/css"> 
     :root 
     { 
      background-color:RGB(255,0,0); 
     } 
    </style> 
</head>

因爲這兩個時間我的根的「背景顏色」設置爲紅色，並且在這兩種情況下，我在html的正確部分這樣做文件，在「head」部分中 - 爲什麼外部.css文件嘗試設置背景色不起作用？

我是新來的CSS，所以我想這裏有一些細微差別，我不知道？我使用Netbeans作爲我的開發IDE，當我創建一個新的.CSS文件時，Netbeans會自動將「display：block」語句放入新的.css文件中，因此我認爲它是需要的，並且只保留這一點。

來源

2011-12-06 wantTheBest

在一個使用了'root'和其他'：root'。看起來我的CSS已知有點過時，因爲我從來沒有聽說過。我猜''root'是某種僞選擇器，'root'需要一個名爲'root'的html標籤。在第一個例子中用'：root'替換'root'是否解決了它？ – CodesInChaos

HTML的root節點是<html>元件，所以選擇器應該是html不root。

在您的外部CSS中，您忘記了:的:root pseudo-selector。在HTML中，它始終是html，所以沒有理由使用012AIAFAIK。

來源

2011-12-06 20:58:42 zzzzBov

使用：index.html中的root將整個視口背景變成紅色。我上面的外部樣式表沒有：root，只有root（無冒號），並且沒有工作。我所瞭解到的細微差別可能在於：root默認爲html標籤，但是root本身並不是。因爲當我將index.html中的上面的根更改爲root（無冒號）時，紅色背景停止工作。當我將外部.css文件的根改爲：root時，出現紅色背景。謝謝，我希望這是一個基本的東西，而不是在文件中的css和外部文件的CSS之間的一些奇怪的區別。 – wantTheBest

有沒有這樣的事情root你可以使用像html或body元素的顏色。我想在你的例子中，你將你的身體設置爲：

body { 
    background-color:RGB(255,0,0); 
}

來源

2011-12-06 20:59:06 Jakub

CSS在外部.css文件中對「根」的處理方式有所不同

回答

相關問題