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

Question

我在Flask模板中嵌入了散景图.该应用程序使用主样式表,而图表需要自己的样式.

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

---

有关更多代码和图像,请参阅Bokeh邮件列表中的我的问题.

这是拉入图表对象的模板代码. 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 {
}