Почему стили Boostrap переопределяют мои пользовательские стили в проекте django, хотя я указал bootstrap раньше, чем пользовательские?
<link rel="stylesheet" href="{% static "bootstrap.css" %}"> <link rel="stylesheet" href="{% static "base.css" %}"> <script type="text/javascript" src="{% static "js/bootstrap.min.js"%}"></script> {% block css %}{% endblock css %}
в моем базовом html я использую этот код, а затем в index htmp я наследую его с
{% extends 'base.html' %} {% load static %}
и затем добавьте пользовательские стили
{% block css %} <link rel="stylesheet" href="{% static "wotsales/index.css"%}"> <link rel="stylesheet" href="{% static "wotsales/single-service.css"%}"> {% endblock css %}
И хотя мои пользовательские стили идут после стилей bottstrap, bootstrap все равно переопределяет мои пользовательские стили:( Я решил эту проблему с помощью ключевого слова !important, но некоторые люди говорят, что это не то, что я должен делать, так что вопрос в том, что я должен делать вместо этого?
Я также пытался удалить некоторые классы из моих элементов, но это не помогло. Я только начал использовать bootstrap. Должен ли он использовать такие вещи, как цвет фона и цвет для элементов, которые не имеют классов bootstrap? Например, у меня есть
<div class="service-text"> <a href="{% url "service" service.slug %}"><h5>{{service.name}}</h5></a> <p>{{service.text}}</p> </div>
Сам по себе он не имеет классов css, только его родители имеют такие классы, как p-4, d-sm-flex. Я только искал, чтобы bootstrap применялся, когда вы используете класс на определенном элементе. Вот css для этой части.
.service-text{ background-color: black !important; color: rgba(253, 255, 240, 0.897) !important; }
Я также читал о специфичности, и замена класса на id действительно помогла, но как быть в ситуациях, когда у меня больше 1 элемента и нужно использовать класс?