为什么内联 CSS 有效但样式表无效？答案

【问题标题】：Why does inline CSS work but not a stylesheet?为什么内联 CSS 有效但样式表无效？
【发布时间】：2014-05-03 22:01:45
【问题描述】：

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

.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 而不是样式表？希望这是有道理的！

【问题讨论】：

您的样式表中可能有一条规则取代了您的.div2 规则。如果是这种情况，Firebug 会告诉你。
如何在文档中包含 css？
这是因为特异性冲突。如果您使用 Chrome，请使用 Inspect 元素查看 CSS 冲突。
根据@SakhalTurkaystan 的建议，查找已划掉的border: 1px solid black;。如果你看到了，那么寻找一个没有被划掉的 border: ... 规则来找到覆盖你想要的 CSS 规则。比该规则更具体。
你能在 jsFiddle 中重现这个吗？

标签： css stylesheet

【解决方案1】：

你也可以强制 CSS 规则是最重要的

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

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

【讨论】：

是的 - 添加 !important;外部 css 中的规则确保其不会在其他地方被覆盖。

【解决方案2】：

这是因为干扰了多个样式表。请检查您的 header.php 或里面的 head 标记，您提到的所有样式表。确保没有两个或多个样式表具有相似的目标。您可以保留足以满足您的特定项目的最少样式表。只需转到 Chrome 中的检查元素，看看哪些样式应用于您的元素。

即使这两个样式表也会相互干扰。

<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 工作正常。

【讨论】：