Html DIV 的内联样式允许边框,但不允许 CSS
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18576932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inline style for DIV allows border, but not CSS
提问by SolarBear
There's obviously something fundamental I don't understand about styling so please help me out.
显然,我对样式有一些基本的了解,所以请帮助我。
Let's take the following simple HTML :
让我们采用以下简单的 HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
所以我在 DIV 里面有一个 DIV,你可以看到它周围有一个漂亮的边框。一切都很好。现在,让我们移除内联样式并将其放入 CSS 文件中。
HTML :
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?
现在没有边框出现。我已经在 Chrome 和 Firefox 上对此进行了测试,所以我认为这不是特定于浏览器的行为。在第二种情况下没有边界当然有一个很好的理由,但我似乎找不到它。为什么会这样,我该如何在我的 CSS 中修复它?
回答by Lewis
Your CSS
file mustn't be getting loaded somehow or you have an older version cached in your browser.
您的CSS
文件不能以某种方式加载,或者您的浏览器中缓存了旧版本。
Your code works fine. Hereit is working in a jsFiddle.
你的代码工作正常。这是在 jsFiddle 中工作的。
Try performing a hard refresh (generally CTRL+F5on Windows, CMD+SHIFT+Ron Mac) and ensuring your CSS
file is located in the same directory as the HTML
file you're trying to open.
尝试执行硬刷新(通常CTRL+F5在Windows,CMD+ SHIFT+R在Mac),并确保您的CSS
文件位于同一目录下HTML
你试图打开文件。
回答by Gary Hayes
Did you put the css file in a sub folder?
你把css文件放在子文件夹中了吗?
If so, you'll need to point to it:
如果是这样,您需要指向它:
<link rel="stylesheet" href="subfoldername/test.css" />