Question

我对CSS很新，发现了一些我不理解的细微差别。我正在尝试设置视口背景颜色，并在此示例中使用红色。

如果我在外部.css文件中使用以下代码，然后将其添加到“head”部分的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文件并将root的颜色更改直接放在我的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>

因为我两次都将root的“background-color”设置为红色，并且在两种情况下我都是在html文件的正确部分，在“head”部分中这样做 - 为什么是外部的.css文件尝试设置背景颜色不起作用？

我是CSS的新手所以我认为这里有一些细微差别我不知道？我正在使用Netbeans作为我的开发IDE，当我创建一个新的.CSS文件时，Netbeans会自动将“display：block”语句放在新的.css文件中，所以我认为它是必需的，只留下它。

Answer 1

HTML的root节点是<html>元素，因此选择器应为html 不 root。

在您的外部CSS中，您忘记了:root pseudo-selector的:。在HTML中，它始终为html，因此没有理由使用:root AFAIK。

Answer 2

没有root这样的东西，您可以使用html或body等元素作为颜色。我想在你的例子中你会将你的身体设置为：

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

CSS在外部.css文件中以不同方式处理'root'

2 个答案: