时间戳

首页 > 解决方案 > 如何阻止子模板在 Flask 中继承父 CSS 类

python - 如何阻止子模板在 Flask 中继承父 CSS 类

问题描述

我有一个父模板，其中包含我的导航栏和其他一些东西：

<!DOCTYPE html>

<head>
    <title>JVB</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>

<body>
    <div>
        <ul>
            <li><b><a href="{{ url_for('linkedin') }}" >CacheMoneyPlaya</a></b></li>
            <li><a class="{{'current_tab' if activePage == 'who' }}" href=" {{ url_for('who')}} ">Who</a></li>
            <li><a class="{{'current_tab' if activePage == 'what' }}" href=" {{ url_for('what')}} ">What</a></li>
            <li><a class="{{'current_tab' if activePage == 'work' }}" href=" {{ url_for('work')}} ">Work</a></li>
        </ul>
    </div>
    </body>
    <div class="content" >
    {% block content %}

    {% endblock %}
    </div>
</html>

它还有一个关联的 css 文件，用于设置从无序列表构造的导航栏的样式，在我的 css 文件中，所有 li 都以特定方式设置样式。当用户单击导航栏中的某个选项卡时，它使用 {% block content %} 将该部分加载到主父文件中，但是子模板也从父模板继承 css，如果我想在其中使用一些 li 标签默认情况下，孩子将在父母中学习课程（这显然是完全有道理的）。

{% extends "layout.html" %}
{% block content %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/about.css') }}">
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<div>
    <div class="opening" >
        <p class="intro" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat,
             sem a lacinia ultricies, quam nibh convallis lorem, sed efficitur nisl nibh et nisi.
              Mauris placerat molestie massa, et fermentum orci scelerisque eu. Morbi ligula est, 
              finibus nec euismod non, auctor mattis orci. Praesent convallis rutrum augue,
               non euismod nisi venenatis eget. 
        </p>
    </div>
</div>


{% endblock content %}

我将如何让子模板不继承父级的 css 类，以便我可以根据孩子的喜好设置我的 li 样式？

标签： pythoncssflask

解决方案

为您希望通过为其分配特定类来反映更改的任何元素上的子模板使用自定义 CSS。

推荐阅读