Я хочу игнорировать дочерние элементы CSS (например, index.html) на nevbar.html
У меня есть панель навигации в 'nevbar.html', и я использую {% extends 'nevbar.html' %} в index.html в index.html также есть файл CSS, но он также влияет на элементы в 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 1018 *
<a href="" class="nav-item nav-link active this-is-navbar">Home</a>
, но index.css также влияет на nevbar.html элементы. Это просто пример, который я мог бы создать для index.html ID, так что CSS будет работать только с тегами в файле, но у меня есть более 5 файлов для добавления nevbar.html, и я не могу создать все ID .
может быть, я могу сделать это, если что-то находится в определенном теге, чем CSS не будет работать с этим тегом или сделать все bootstrap по умолчанию, если он находится в nevbar.html файле
Frontend framework: bootstrap
Backend framework: Flask
code sample
бэкэнд, если вы go до /
@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>