防止从jinja2包含继承css

Question

我有一个简单的超文本标记语言页面(main.html)，它是通过jinja2/flask呈现的。

main.html

{% extends 'layout.html' %}

{% include 'content1.html' %}
{% include 'widget1.html' %}
{% include 'widget2.html' %}

layout.html包括一些CSS (bootstrap)，JS和一些用于所有页面的超文本标记语言(页眉/菜单)。

我希望非常简单地包括在这个html页面，一些内容模板和一些‘小工具’。这些小部件更为复杂，因为它们包含自己的JS和CSS (引导程序)……这造成了麻烦，因为widget1.html中的CSS覆盖了main.html的CSS (考虑到include，这并不出人意料)。

有没有办法在不让CSS/JS返回到父页面(main.html)的情况下“包含”widget1.html？

我不希望重构widget1.html，因为它是一个外部应用。这里有没有一个简单的解决方案？

提前感谢！

Answer 1

我在这里也遇到了同样的问题。即使更改了.css，也不会重新加载，因为浏览器正在缓存信息。我找到了一种非常简单的方法。

我解决这个问题的方法是使用从time模块导入ctime，如下所示：

从时间导入

然后，我将ctime()函数归因于我的flask路由中的time。如下所示：

#@app.route('/home')
## def homepage():
##     return render_template('home.html' , time = ctime())

然后，在我的html href中，我这样做了：

## <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css')}}?{{time}}">

在引用路径的末尾添加?{{ time }}，时间信息将每秒更新一次，浏览器将无法识别css并对其进行缓存，因为浏览器会将新信息与之前的信息进行比较。

有了这个，你将成为你的实时css。

希望这能有所帮助。

干杯!

-Nelio

Answer 2

请看这个答案：How To Isolate a div from public CSS styles?

您可以创建包装类.isolate，并按如下方式使用它：

​

p {
  color: blue;
}

.isolate * {
  all: unset;
}

.example {
  border: 1px solid;
  padding: 1em;
}

<p>By default all text is blue.</p>
<div class="isolate example">
  <p>Within the "isolate" div, that CSS is removed</p>
</div>
<p>Outside of the div, default rules apply once again.</p>

​