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>

不会产生所需的结果：app-name，inner和acceleration徽标divbox都在屏幕上死点，app-name必须在左侧，而徽标在右侧。

我已经测试了以下代码（以不期望的方式产生了所需的结果 - 我可能会多次重复使用.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且类.acceleration-logo的div而不是.acceleration-logo的父级为#topmostheader

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

3 个答案: