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;   
}

但如果我再输入一条规则，即在#dialog-container之前插入#dialog-box，那么它就不会像这样：

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

但是我认为这意味着应用于对话框中的对话框图标并且在对话框容器内？

我错过了什么吗？

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

首先，您有三个开放的<div>标记，但只有两个结束标记。

其次，您无需声明#id1 #id2，因为#id2是标识符，并且只能识别一个元素。为#id2声明规则就足够了。

Answer 3

此

#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（至少不正确），因此不起作用。

使用多个选择器将CSS样式应用于元素失败

3 个答案: