为什么内联CSS工作但不是样式表？

Question

我创建了一个网页，其中使用了具有以下类的样式表 -

.div2 {
 border:1px solid black;
 width:75%;
 margin:auto;
}

我已将它应用于网页上的div标签，如下所示 -

<div class="div2"></div>

当我在浏览器中查看网页时，该类根本没有任何效果。现在，当我像这样使用内联CSS时 -

<div style="border:1px solid black;width:75%;margin:auto"></div>

并在我的浏览器中查看网页，该类已应用并完美运行！

我很高兴它有效，但我想知道为什么它的工作方式而不是另一种方式！两种方法都不应该导致同样的事情发生吗？我在样式表上有其他类都可以工作，所以我不必在其他任何地方使用内联CSS。是否有需要使用内联CSS而不是样式表的情况？希望这是有道理的！

Answer 1

您还可以强制CSS规则最重要

.div2 {
 border:1px solid black !important;
 width:75% !important;
 margin:auto !important;
}

仅临时使用它来验证类名是否正确键入以及CSS文件是否正确链接。

Answer 2

这是因为干扰了多个样式表。请检查header.php或head标签内部，以及您提到的所有样式表。确保没有两个或更多样式表具有类似的目标。您可以保留足以满足特定项目的最小样式表。只需转到Chrome中的Inspect Element，查看适用于您的元素的样式。

即使这两个样式表也会产生干扰。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我有同样的问题，我已经删除了<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">这个样式表，只保留在一个以上。 （别忘了保存和刷新）外部CSS工作正常。