Применение стиля CSS к элементу с использованием нескольких селекторов завершается неудачно

Question

Я пытаюсь выяснить, что я делаю не так.У меня есть следующий HTML:

<div id="dialog-container">
    <div id="dialog-box" title="" >
        <div id="dialog-icon" >
            &nbsp;
        </div>
        <p>
        <span id="dialog-message"></span>
        </p>
    </div>
</div>

У меня есть немного CSS, который плавает влево.Если я введу следующее, оно будет работать

#dialog-box #dialog-icon
{
    float: left; 
    height: 32px; 
    width: 32px;   
}

, но если я введу еще 1 правило, т.е. вставим #dialog-container перед #dialog-box, тогда оно не будет применено так:Я думал, что это означает, что применяется к значку диалога, который находится внутри диалогового окна и находится внутри контейнера диалога?

Я что-то упустил?

Answer 1

Ваш HTML неправильно сформирован или структурирован для ваших нужд.Вам не хватает закрывающего тега DIV на втором DIV.Это может быть то, что вам нужно:

<div id="dialog-container">
    <div id="dialog-box" title="" >
        <div id="dialog-icon" >
            &nbsp;
        </div>
    </div>
</div>

Как у вас было, третий div не считался ребенком (или «внутри») второго.После обновления

Я проверил это в JSFiddle (добавив цвет для красного и немного текста для выделения).Кажется, работает нормально:

http://jsfiddle.net/WW3v2/

У вас есть еще информация?

Answer 2

Это

#dialog-container #dialog-box #dialog-icon

будет соответствовать следующей структуре:

<div id="dialog-container">
    <div id="dialog-box">
        <div id="dialog-icon"></div>
    </div>
</div>

, но, поскольку ваш dialog-icon не находится внутри dialog-box (по крайней мере, неправильно), это делаетне работает.

Answer 3

Во-первых, у вас есть три открывающих тега <div>, но только два закрывающих.

Во-вторых, вам не нужно объявлять #id1 #id2, поскольку #id2 является идентификатором и разрешено только идентифицировать один элемент.Достаточно объявить правило для #id2.