因此，我为我的徽章消息通知有一个特定的CSS代码，当我弄乱它时不会被更新。我的其余CSS，都在styles.css表格中工作了。当我编辑它们时，更改会反映出来。即使将我的徽章CSS代码移到styles.css上，所做的更改仍然不会反映出来。当我检查元素时，它们确实在显示，但没有反映在浏览器中。我尝试清空缓存，进行硬重装等，但似乎没有任何效果。我猜有什么东西可以覆盖我的徽章代码吗？第一次制作时，编辑它有0个问题。同时，我必须添加一些内容。我的徽章应该显示为白色而不是红色，并且应该比它高得多，但是它没有动，并且仍然与我最初制作时的颜色相同。
base.html / header
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
base.html /徽章
<a class= text-danger href="{% url 'dating_app:conversations' user.id %}" type="text/css" class="notification">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
notification.css
.notification {
text-decoration: none;
padding:50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: 50px;
right: -25px;
padding: 20px 20px;
border-radius: 100%;
background: white !important;
color: white;
}
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "dating_app/static"),
]
项目网址
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('dating_app.urls', namespace= 'dating_app')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
目录
.
├── 11_env
│ ├── bin
│ │ ├── __pycache__
│ │ ├── activate
│ │ ├── activate.csh
│ │ ├── activate.fish
│ │ ├── django-admin
│ │ ├── django-admin.py
│ │ ├── easy_install
│ │ ├── easy_install-3.7
│ │ ├── pip
│ │ ├── pip3
│ │ ├── pip3.7
│ │ ├── python -> python3
│ │ ├── python3 -> /Library/Frameworks/Python.framework/Versions/3.7/bin/python3
│ │ └── sqlformat
│ ├── include
│ ├── lib
│ │ └── python3.7
│ └── pyvenv.cfg
├── dating_app
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ ├── admin.cpython-37.pyc
│ │ ├── forms.cpython-37.pyc
│ │ ├── models.cpython-37.pyc
│ │ ├── tests.cpython-37.pyc
│ │ ├── urls.cpython-37.pyc
│ │ └── views.cpython-37.pyc
│ ├── admin.py
│ ├── apps.py
│ ├── chat.html
│ ├── forms.py
│ ├── media
│ │ └── profile_photo
│ ├── migrations
│ │ ├── 0001_initial.py
│ │ ├── 0002_auto_20200410_2231.py
│ │ ├── 0003_auto_20200411_2011.py
│ │ ├── 0004_auto_20200413_1930.py
│ │ ├── 0005_auto_20200413_1946.py
│ │ ├── 0006_auto_20200413_2222.py
│ │ ├── 0007_auto_20200422_1947.py
│ │ ├── 0008_auto_20200425_0039.py
│ │ ├── 0009_auto_20200426_1957.py
│ │ ├── 0010_auto_20200426_2005.py
│ │ ├── 0011_auto_20200426_2005.py
│ │ ├── 0012_auto_20200426_2007.py
│ │ ├── 0013_auto_20200427_1846.py
│ │ ├── 0014_auto_20200503_1947.py
│ │ ├── 0015_auto_20200503_2011.py
│ │ ├── 0016_auto_20200511_0104.py
│ │ ├── __init__.py
│ │ └── __pycache__
│ ├── models.py
│ ├── static
│ │ ├── css
│ │ ├── fonts
│ │ ├── images
│ │ └── js
│ ├── tag.py
│ ├── templates
│ │ └── dating_app
│ ├── templatetags
│ │ ├── __init__.py
│ │ ├── __pycache__
│ │ └── unread_messages_counter.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── dating_project
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-37.pyc
│ │ ├── settings.cpython-37.pyc
│ │ ├── urls.cpython-37.pyc
│ │ └── wsgi.cpython-37.pyc
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── manage.py
└── requirements.txt
base.html
{% load bootstrap4 %}
{% load static %}
{% load unread_messages_counter %}
<!-- Navbar is located in this file -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
{% block head %}
<title>Base</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light bg-light ">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item">
<a class= text-danger href="{% url 'dating_app:conversations' user.id %}" type="text/css" class="notification">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a class= text-danger href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class= text-danger href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a class=text-danger href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a class=text-danger href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a class=text-danger href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a class= text-danger href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a class= text-danger href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
<div>
</nav>
</div>
<!--
<nav class="navbar navbar-expand-md navbar-dark fixed-top ">
<div class = 'nav-wrapper'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand" href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}" /></a>
</li>
</ul>
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li>
<a ref = 'stylesheet' href="{% url 'dating_app:conversations' user.id %}" type="text/css" class= text-white class="notification">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li>
<a ref = 'stylesheet' class= text-white href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a class="nav-link" class= text-white href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a class="nav-link" class= text-white href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a class="nav-link" class= text-white href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" class= text-white href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<div>
<a href="{% url 'dating_app:login' %}">log in</a>
<br>
<a href="{% url 'dating_app:register' %}">register</a>
</div>
{% endif %}
</div>
<div>
</nav>
-->
<!-- HEADER AREA END -->
<!--Below is individual page will html will be rendered -->
{% block content %}
{% endblock %}
<h1 id="h1"> Hello world</h1>
<!-- FOOTER AREA BEGINS BELOW-->
<footer class="container">
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：1)
你要踢自己...
您在第一个text-danger类中缺少引号，并且具有两个类属性：
<a class="text-danger notification" href="{% url 'dating_app:conversations' user.id %}" type="text/css">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>