Question

我是html / css的新手，并对其做了一些教程并尝试添加一个简单的框。它显示文本，但不显示它周围的框。

这是我的css

body
{

background: #6a6a6a;    
background-image:  -moz-linear-gradient(top,  #6a6a6a 0%, #353535 100%);
background-image:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a6a6a), color-stop(100%,#353535));
background-image:  -webkit-linear-gradient(top,  #6a6a6a 0%,#353535 100%);
background-image:  -o-linear-gradient(top,  #6a6a6a 0%,#353535 100%);
background-image:  -ms-linear-gradient(top,  #6a6a6a 0%,#353535 100%);
background-image:  linear-gradient(to bottom,  #6a6a6a 0%,#353535 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#353535',GradientType=0 );

background-size: auto;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;





.box
{
  background: #fff;
  border: 6px solid #ccc;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

}

这是我的HTML

<!DOCTYPE html>

<html>

<head>
    <title>Where do you want to go?</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>

<body>

<div class="box"> why doesn't this show up? </div>

</body>

</html>

“为什么这不应该出现在一个盒子里，但事实并非如此。

Answer 1

在css文件中执行.box，而不是#box。 #box如果您有id="box"，.box就是class="box" 好吧，你刚刚编辑了这个问题，所以这是无效的

啊，发现了问题。将.box {}移出正文{}。

Answer 2

如果您的css位于不同的文件夹中，则更新您的href
试试这个模式
```
body{
}
.box{
}
```

Answer 3

CSS不是嵌套的。虽然你可以直截了当地写下一些东西：

#id {
    color: red;

    .box {
        border: 6px solid #ccc;
    }
}

无效。你必须做一些单调乏味的事情：

#id {
    color: red;
}

#id.box {
   border: 6px solid #ccc;
}

这就是为什么我建议也要查看SASS或LESS。

我的盒子为什么不显示？

3 个答案: