Question

我正在尝试创建一个在线计算器，以帮助我学习HTML，CSS和JavaScript。我试图在主容器中创建“按钮”作为嵌套框。容器和“屏幕”显示得很好，但我无法获得背景颜色来显示我试图制作的第一个“按钮”。下面是我到目前为止的HTML和CSS文件。有什么建议吗？

HTML：

<!doctype html>

<html>
 <head>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "calculator.css">
<script type = "text/javascript" src = "calculator.js"></script>

<title>Quick Calculator</title>
 </head>
  <body>
<div id = "wrapper1">
    <div id = "screen">

    </div>

    <div id = "7button">

    </div>          
</div>
 </body>
</html>

CSS：

#wrapper1{
background-color: #777;
-webkit-border-radius: 7px;
height: 28em;
width: 22em;
padding-top: 0.3em;
padding-left: 0.3em;
padding-right: 0.3em;
vertical-align: middle;
margin: 0 auto;
box-shadow: 2px 2px 1.5px #555
}

#screen{
height: 10em;
width: 20em;
margin: 1em 1em;
background-color: #C8F56E;
-webkit-border-radius: 2px;
box-shadow: 3px 3px #94B551 inset;
}

#7button{
margin: 0.5em 0.5em 0.5em 0.5em;
height: 1.5em;
width: 3.5em;
background-color: #000;
/*-webkit-border-radius: 2px;
box-shadow: 2px 2px 1.5px #111;*/
}

Answer 1

CSS ID不能以数字开头。改为将它改为button7。

Answer 2

您不能将数字用作'id'属性的主角。查看http://www.w3.org/TR/html4/types.html#h-6.2

Answer 3

ID不应以数字开头。将ID从7按钮更改为sevenButton。

Answer 4

你不能把数字作为css样式的第一个字符

Example

嵌套<div>的CSS背景颜色不会显示</div>

4 个答案: