Question

我正在尝试构建一个只显示div的页面。当我尝试使用类或ID作为选择器时，我的元素将不会格式化，但是当我使用实际元素作为选择器时，它的格式就好了。

这是我的代码，它不会格式化div或它包含的段落：

<!DOCTYPE HTML>
<html>
<head>
<title>Placeholder</title>
<style type="text/css">
body {
    background-color:#9585FF;
}
.centerBox {
    margin:auto;
    width:60%;
    height:1200px;
    background-color:#D6D1F9;
    padding:10px;
    text-align:center;
}
h1 {
    width:800px;
    height:100px;
    margin:auto;
    color:white;
    font-size:600%;
    font-family:courier;
    font-weight:bold;
}
#centerText {
    font-size:140%;
    font-color:#000000;
    font-family:courier;
    font-weight:bold;
}

a {
    text-decoration:none;
    color:inherit;
}
</style>
</head>
<body>
<h1><a href="matthew-renze.netau.net">renze</a></h1>
<div id="centerBox">
<p class="centerText">Some text for the center div</p>
</div>
</body>
</html>

除了centerDiv id和centerText类格式之外的所有内容都很好。那些只有在我放弃class / id并且只使用元素名称时才能工作：

.centerBox {
    margin:auto;
    width:60%;
    height:1200px;
    background-color:#D6D1F9;
    padding:10px;
    text-align:center;
}
#centerText {
    font-size:140%;
    font-color:#000000;
    font-family:courier;
    font-weight:bold;
}

我意识到这对我发布的内容很好，但如果我尝试添加更多div或段落，它会让我感到困惑。可能我犯了一个noob错误，但非常感谢帮助。感谢。

Answer 1

你的CSS应该是这样的：

#centerBox {
    margin:auto;
    width:60%;
    height:1200px;
    background-color:#D6D1F9;
    padding:10px;
    text-align:center;
}
.centerText {
    font-size:140%;
    font-color:#000000;
    font-family:courier;
    font-weight:bold;
}

因为在你的html页面centerBox是id（＃）而centerText是class（。）

code is given here ( demo )

HTML元素不会使用类或ID进行格式化

1 个答案: