Почему мои блоки div игнорируют мой код CSS?

Question

Во-первых, я хотел бы сказать, что я проверил, работает ли моя ссылка на мой .css, фон превращается в черный цвет.

Это тестовое приложение ASP.NET Mvc, которым я являюсьсоздание, и я испытываю затруднения, помещая некоторые из моих элементов, которые вложены в блоки div.Я пришел к выводу, что мои блоки div, вложенные в блок topmostheader, игнорируют мой код .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 и ускорения с логотипом находятся в мертвой точке экрана, где имя app должно быть вслева и логотип справа.

Я проверил следующий код (который дал желаемый результат нежелательным образом - я могу многократно использовать этот код, который находится в файле .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?

Answer 1

Чтобы указать правильные значения div, вам необходим пробел между идентификатором и именем класса в ваших правилах CSS: (например, измените #topmostheader.app-name на #topmostheader .app-name)

Answer 2

вам нужно поставить пробел между идентификатором #topmostheader и классом, например .acceleration-logo в противном случае браузер предполагает, что вы применяете стиль для div с идентификатором #topmostheader и классом .acceleration-logo, а не потомком класса .acceleration-logo с родителем #topmostheader

Answer 3

Вам не хватает пробела между селекторами идентификаторов и селекторами классов.

#topmostheader.inner означает «выбрать элемент с идентификатором topmostheader и классом inner».

Вы хотите #topmostheader .inner, что означает «выбрать элементы с классом inner, которые являются потомками элемента с идентификатором topmostheader«