Question

我编写了以下CSS，它适用于Firefox但不适用于Chrome。

body
{
    background: darkorange;
    padding-top: 54px;
}

上面的CSS是我已应用于项目的唯一自定义css。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<link rel="stylesheet" th:href="@{/css/style.css}" type="text/css"/>

这是 Chrome ，而错误。

这是 Firefox ，它是正确

更奇怪的是，当我编写CSS内联时，它可以在两种浏览器上运行。

<body style="padding-top: 54px; background: darkorange;">

两个问题：

1）为什么CSS无法在Chrome上运行？

2）为什么CSS在内联编写时有效？

Answer 1

确保更改css文件后正在浏览器中进行硬刷新。 CTRL + R或CTRL + F5应该起作用。

Answer 2

首先，我认为它与引导程序没有任何关系，因为没有向该元素添加引导类。

其次，仔细检查你的css文件和元素的路径

Server2018.jar!\com\company\party.txt

第三，使用Chrome Debugger工具。右键单击，然后检查body标签以查看是否应用了任何样式。

我测试了你提供的内容，对我来说既适用于Firefox，也适用于Chrome。你可以在下面看到它。

Open JS Fiddle

Answer 3

使用CSS有一个文件层次结构。当您在头脑中链接样式表时，它会被自上而下读取，最后一个文件优先于您调用的第一个文件。

实施例

<link rel="stylesheet" type="text/css" href="css/globals.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

在这段代码中，index.css将优先于globals.css，因为它是最后一个被访问的。

当您尝试通过两个不同的样式表将多个效果应用于元素时，这通常只是一个问题，但在您的情况下，这也可能是真的。您可能会发现Bootstrap样式优先于您自己的样式。

Chrome和Firefox调试器都可以帮助您查看要添加到元素的样式。我恳请您检查调试器告诉您的内容并从那里开始。

Chrome - 内联css有效，但样式表没有

3 个答案: