Question

我开始尝试构建HTML 5网站，但遇到了CSS问题。以下是该问题的MCVE：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    div.content {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 75%;
    }

    div.topbar {
        background-color: #777777;
        border-bottom: 1px #000000 solid;
        color: #FFFFFF;
        padding: 5px;
    }
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>

如果您取出<!DOCTYPE html>标签，则页面顶部的顶部栏会有效，但如果您将其放入，则无法正确渲染，因为div元素的背景颜色未呈现，也不是边界。

我在这里做错了什么，以致div.topBar样式定义没有得到充分尊重？

Answer 1

问题在于

div.topbar

应该是

div.topBar

因为<div class="topBar">不是<div class="topbar">

由于某些原因它仍然以怪癖模式渲染，但html5模式不会渲染它。

（Demo）

Answer 2

HTML和CSS区分大小写。 'topbar'和'topBar'是不同的。要么大写类的名称，要么更正div.topbar。

使用HTML 5 doctype时，CSS样式定义似乎不受尊重

2 个答案: