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

Question

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

这是我正在制作的ASP.NET Mvc测试应用程序,我很难定位嵌套在div框中的一些元素.我得出的结论是,嵌入在topmostheader框中的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>

不会产生所需的结果:应用程序名称,内部和加速徽标分隔符都在屏幕中死点,其中应用程序名称必须位于左侧,徽标位于右侧.

我已经测试了下面的代码(以不希望的方式产生了所需的结果 - 我可能会多次重复使用.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>

我究竟做错了什么？当我使用.css文件时,为什么我的div框不会"浮动"？

Answer 1

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

Answer 2

您在ID选择器和类选择器之间缺少空格.

#topmostheader.inner表示"选择id为topmostheader和类的元素inner".

你想要的#topmostheader .inner,这意味着"选择具有类inner的元素是元素的后代,其id为topmostheader"

Answer 3

你需要在id #topmostheader和类之间放一个空格,.acceleration-logo否则浏览器会假设你将样式应用于具有id #topmostheader和class的div 而.acceleration-logo不是.acceleration-logo具有父类的class 的子类#topmostheader