CSS样式未在HTML中应用

Question

我有以下HTML代码，我希望将其包含在不同文件的CSS中

<div id="leftPanel" style="background-color:grey;
                margin-left:7px;
                margin-top:7px;
                float:left;">
                <img src="images/fa.png">
            </div>

<div id="right" style="font-size:72%;float:left; margin-left:15px;margin-top:15px">
                Lorem Ipsum Text oder Claim<br>gerne auch mehrzeilig
            </div>

看起来像这样：

现在，如果我尝试将样式插入单独的CSS中，如下所示：

    #leftPanel {
   background-color:grey;
   margin-left:7px; 
   margin-top:7px;
   float:left;
}

在HTML中：

<link rel="stylesheet" href="css/style.css"/>
<div id="leftPanel">
                <img src="images/fa.png">
            </div>

然后改变位置，得到这个结果：

Answer 1

leftPanel是最终html中的id，而不是类。在css中，它应该是#leftPanel而不是.leftPanel。

Answer 2

您的第一段HTML已class="leftPanel"，其中第二段代码为id="leftPanel"。

如果您已将其从类更改为ID，则需要在CSS中将其引用为#leftPanel。

Answer 3

您的CSS根据班级.leftPanel匹配，但您的div有id="leftPanel"而不是class="leftPanel"。这是一个错字吗？

Answer 4

这对我来说很好看。听起来像你的CSS文件没有正确加载的问题。检查以确保CSS文件保存在正确的位置并包含正确的ID样式。

http://jsfiddle.net/zfdUw/1/（这在Safari中适合你吗？）
HTML：

<link rel="stylesheet" href="css/style.css"/>  <!--Check to make sure the file is here-->
<div id="leftPanel">
            <img src="images/fa.png">
        </div>

<div id="right" style="font-size:72%;float:left; margin-left:15px;margin-top:15px">
                Lorem Ipsum Text oder Claim<br>gerne auch mehrzeilig
            </div>

CSS：

#leftPanel {
    background-color:gray;
    margin-left:7px; 
    margin-top:7px;
    float:left;
}