时间戳

首页 > 解决方案 > extends - 如何忽略父级上的子级 CSS

html - extends - 如何忽略父级上的子级 CSS

问题描述

我想忽略子 CSS（index.html例如）nevbar.html

我有一个导航栏，'nevbar.html'我正在使用{% extends 'nevbar.html' %}其中index.html还有一个 CSS 文件，index.html但它也会影响我想要的元素，nevbar.html因此效果只会发生index.html在'nevbar.html'. 代码示例：

a {
    background:
       linear-gradient(
         to bottom, var(--mainColor) 0%,
         var(--mainColor) 100%
       );
      background-position: 0 100%;
      background-repeat: repeat-x;
      background-size: 4px 4px;
    color: #000;
    text-decoration: none;
    transition: background-size .2s;
  }

这是除了index.css nevbar.html也使用a标签

<a href="" class="nav-item nav-link active this-is-navbar">Home</a>

而且对元素index.css也有影响。nevbar.html这只是一个我可以为其创建 ID 的示例，index.html因此 CSS 仅适用于文件中的标签，但我有超过 5 个文件要放入nevbar.html其中，我无法为所有内容创建 ID。

如果某个标签中有某些东西，也许我可以这样nevbar.html做

Frontend framework: bootstrap
Backend framework: Flask

code sample

如果你去后端/

 @app.route('/')
    @login_required
    def index():    
        return render_template('index.html', user=current_user.username, level = int(current_user.level))

index.html部分

{% extends 'navbar.html' %}

{% block head%}
<title> Main Page </title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
{% endblock %}


{% block body%}........

navbar.html

start of the code
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">..... end of the code
     </nav>
    </div>
    {% block body%}{% endblock %}
</body>
</html>
<style>
    .bs-example{
        margin: 20px;
    }
</style>

标签： htmlcssflaskbootstrap-4

解决方案

推荐阅读