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

Question

我正在尝试构建一个仅显示 div 的页面。当我尝试使用 classes 或 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 格式之外的一切都很好。那些只有在我放弃 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 或段落，它会把我搞砸的。可能我犯了一个菜鸟错误，但非常感谢帮助。谢谢

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 进行格式化

HTML elements won't format using classes or IDs

html

css

elements

css-selectors

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

HTML elements won't format using classes or IDs

html

css

elements

css-selectors

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