尽管加载了CSS，CSS ID选择器仍无法与引导程序一起使用？

Question

我正在使用引导程序来处理我的网站。

当然，在某些情况下，引导程序可能不够用或缺乏灵活性。

在这些情况下，我们将要使用自定义CSS。

但是，当我使用CSS时，没有任何区别。

例如：

我有图片

{% extends "base.html" %}
.
.
.
<div class="container">
    <div class="row">
        <img src="https://cdn.dribbble.com/users/3858/screenshots/5909706/stackoverflow-design.png" id="foo">
    </div>
</div>
.
.
.

而且我想给它一些样式，所以我加载了main.css并输入

#foo{
height: 400px;
border-radius: 10px;
}

但是我的图像没有改变高度或边界半径。

但是，如果我这样做并添加我的样式内联：

<div class="container">
    <div class="row">
        <img src="https://cdn.dribbble.com/users/3858/screenshots/5909706/stackoverflow-design.png" id="foo" style="height:400px; border-radius:10px;">
    </div>
</div>

它起作用了，世界上一切都很好。

使用一些研究，似乎这个问题通常与任何一个有关

a）不够具体，因此引导样式优先。

我不知道这是怎么回事，因为我给img标签id="foo"赋予了唯一的ID，我能得到多少更具体的信息？

或

b）无法正确加载css

这是我加载CSS的方式

BASE.HTML

...
<!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
...

我对CSS很陌生，我想念什么？

UPDATE

今天我花了几个小时，试图解决这个问题，但未成功。

这是我尝试过的：

使用!important来查看选择器特异性是否存在问题。我补充说，它仍然没有用。

接着，我在项目上执行了一个检查元素，我可以看到它正在识别标记，并且css已正确链接，但仍无法正常工作，在样式菜单中它仅显示：

当然，我没有提到我的自定义CSS，只有我认为是引导样式的内容。

自定义css肯定已加载，您可以在这里看到我在chrome inspect中的网络详细信息，在main.css文件上显示状态200。

我花了几个小时都没有成功。

任何人都可以帮忙！！！！

Answer 1

在Chrome中，您可以在打开开发工具的同时禁用缓存文件-只需选中开发工具中“网络”标签上的“禁用缓存”选项。

Answer 2

每个答案请求：

这似乎是一个缓存问题。您可以通过几种方式绕过缓存：

硬刷新

在浏览器上进行强制刷新。完整的说明可以在这里找到：https://support.piktochart.com/article/243-clear-browser-cache

但是这里是要点：

Windows / Linux：CHROME

1. 按住Ctrl并单击Reload按钮。
2. 或者，按住Ctrl并按F5键。
3. 按F12打开Chrome开发工具。 chrome开发工具打开后，只需右键点击刷新按钮，然后就会弹出一个菜单。此菜单使您可以选择进行硬刷新，甚至清除缓存并自动进行硬刷新。

Mac：

1. 按住Shift并单击重新加载按钮。
2. 或者，按住⌘（Cmd）和⇧（Shift）键，然后按R。

Windows / Linux（Mozilla Firefox和相关浏览器）：

1. 按住Ctrl键并按F5键。
2. 或者，按住Ctrl和⇧（Shift），然后按R。

Mac：

1. 按住H（Shift）并单击重新加载按钮。
2. 或者，按住⌘（Cmd）和⇧（Shift），然后按R。

Internet Explorer：

1. 按住Ctrl键并按F5键。
2. 或者，按住Ctrl键并单击“刷新”按钮。

禁用浏览器中的缓存

如上述Daniel Vitek的回答（https://stackoverflow.com/a/61218568/1172189中所述，您可以在任何使用的浏览器中使用Developer Tools禁用缓存。

版本您的CSS文件

使用此选项，您可以通常绕过缓存，方法是告诉浏览器重新加载CSS，因为发生了更改。

手动

[例如，每次更新时，向CSS添加查询字符串。 main.css?v=2这将起作用，但需要您更新版本。

以编程方式如果您使用服务器端语言，模板系统甚至是JS（警告是JS可能应该在CSS文件之前加载而不是推迟），则可以基于CSS的修改日期添加查询字符串。这将确保仅在实际发生更改时才重新加载CSS。

一个PHP示例将使用filemtime()。这将获取文件的修改时间。

main.css?v=<?php echo filemtime('main.css'); ?>

这将打印出上次修改文件的UNIX时间戳。