css - 为什么我的 div 框会忽略我的 css 代码？

Question

首先，我想说我已经测试了我的 .css 链接是否有效，背景是否变成了黑色。

这是我正在制作的 ASP.NET Mvc 测试应用程序，我很难定位嵌套在 div 框中的一些元素。我得出的结论是，嵌套在最顶层框中的 div 框忽略了我的 .css 代码。

这是我的整个 css 文件，名为 custom1.css

#topmostheader
{               
    background: none repeat scroll 0% 0% rgb(0, 0, 0);
    height: 90px;
    text-align: center;
}

#topmostheader.inner
{
    width: 1280px;
    margin: 0 auto;
    text-align: left;
    background-color: Red;
}

#topmostheader.app-name
{
    font-size: 14px;
    float: left;
    line-height: 90px;
    color: rgb(119,119,119);
    margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
    margin: 0px;
    height: 90px;
    float: right;
}

这是我的 div 框布局。

<div id="topmostheader">
    <div class="inner" >
        <div class="app-name">
            Lunch Application
        </div>
        <div class="xxx-logo">
            <img src="/content/xxx/logo.png" alt="xxx logo"/>
        </div>
    </div>
</div>

没有产生预期的结果:应用名称、内部和加速 Logo divbox 都在屏幕的死 Angular ，其中应用名称必须在左侧， Logo 在右侧。

我已经测试了以下代码(以不希望的方式产生了预期的结果 - 我可能会多次重复使用 .css 文件中的这段代码)

<div id="topmostheader">
    <div class="inner" >
        <div class="app-name" style="float:left">
            Lunch Application
        </div>
        <div class="xxx-logo" style="float:right">
            <img src="/content/xxx/logo.png" alt="xxx logo"/>
        </div>
    </div>
</div>

我做错了什么？为什么我的 div 框在我使用 .css 文件时没有“ float ”？

Answer 1

要定位正确的 div，您需要在 CSS 规则中的 id 和类名之间留一个空格:(例如，将 #topmostheader.app-name 更改为 #topmostheader .app-name)