将不同的样式表应用于模板的不同元素

Question

我正在 Flask 模板中嵌入散景图。该应用程序使用 master stylesheet，而图表需要自己的样式。

主样式表泄漏到图表中并改变了它的外观。如何将不同的样式应用于模板中的不同部分，以便只有一种样式处于活动状态？

查看我在 Bokeh mailing list 上的问题以获取更多代码和图像。

这是拉入图表对象的模板代码。 resources、script、div是对象的元素，由图表库生成。

{% extends "base.html" %}
{% block content %}
    <frame>
    <head>
        <meta charset='utf-8' />
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        {{ resources|indent(4)|safe }}        
        {{ script|indent(4)|safe }}
    </head>
    <body>
        {{ div|indent(4)|safe }}
    </body>
    </frame>
{% endblock %}

Answer 1

你不知道，那不是 HTML/CSS 的工作方式。所有链接的样式表都适用于整个文档，Jinja 模板不考虑它。您使用选择器有选择地将 CSS 规则应用于 HTML 元素。为图表元素指定一个 ID，并为该 ID 编写规则。

<div id='my_chart'></div>

#my_chart {
}

将不同的样式表应用于模板的不同元素

Apply different stylesheets to different elements of a template

html

css

python

flask

bokeh