Question

显然有些基本的我不了解造型，所以请帮帮我。

让我们采用以下简单的HTML：

<!DOCTYPE html>
<html>
<div>
    <div style="border: 1px solid black;">
        Hi!
    </div>
</div>
</html>

所以我在DIV里面有一个DIV，你可以在它周围看到一个漂亮的边框。一切都很好。现在，让我们删除内联样式并将其放在CSS文件中。

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="test.css" />
</head>
<div>
    <div class="test">
        Hi!
    </div>
</div>
</html>

CSS：

.test {
    border: 1px solid black;
}

现在没有边框出现。我已经在Chrome和Firefox上测试了这个，所以我不认为这是特定于浏览器的行为。肯定有一个很好的理由说明在第二种情况下没有边界，但我似乎无法找到它。为什么这样，我如何在我的CSS中修复它？

Answer 1

您的CSS文件不得以某种方式加载，或者您的浏览器中已缓存旧版本。

您的代码运行正常。 Here它正在jsFiddle中工作。

尝试在Windows上执行硬刷新（通常 CTRL + F5 ， CMD + SHIFT + R 在Mac上）并确保您的CSS文件与您尝试打开的HTML文件位于同一目录中。

Answer 2

您是否将css文件放在子文件夹中？

如果是这样，你需要指出它：

<link rel="stylesheet" href="subfoldername/test.css" />

DIV的内联样式允许边框，但不允许CSS

2 个答案: