为什么我的特定CSS代码更改未反映在我的浏览器上?

本文介绍了为什么我的特定CSS代码更改未反映在我的浏览器上?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

因此，我为我的徽章消息通知有一个特定的CSS代码，当我弄乱它时，它不会被更新.我的其余CSS，都在styles.css表格中工作了.当我编辑它们时，更改会反映出来.即使当我将我的徽章CSS代码移到 styles.css 上时，更改仍然不会反映出来.当我检查元素时，它们确实在显示，但没有反映在浏览器中.我尝试清空缓存，进行硬重装等，但似乎没有任何效果.我猜是否有一些东西可以覆盖我的徽章代码?当我第一次制作它时，在编辑它时遇到了0个问题.同时，我必须添加一些内容.我的徽章应该显示为白色而不是红色，并且应该比它高得多，但是它没有动，并且仍然与我最初制作时的颜色相同.

So, I have a specific css code for my badge message notification that is not being updated when I mess with it. The rest of my css, form styles.css are working. When I edit them, the changes are reflected. Even when I move my badge css code over to styles.css the changes are still not reflected. They are indeed showing up when I inspect element, but not being reflected in the browser. I tried emptying the cache, doing a hard reload, etc. but nothing seems to be working. I am guessing there is something overriding my badge code? When I first made it, I had 0 problems editing it. I must of added something in the meantime. My badge should be showing up as white instead of red, and it should be far higher than it is, but it's not moving and it's still the same color as when I originally made it.

base.html/header

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 %}  <!doctype html> <html lang="en"> <head>  <link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="ajax.googleapis/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="maxcdn.bootstrapcdn/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="use.fontawesome/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>  <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>    {% block content %} {% endblock %} <h1 id="h1"> Hello world</h1>  <footer class="container"> </footer>   <script src="code.jquery/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>

推荐答案

你要踢自己...

您在第一个text-danger类中缺少引号，并且具有两个类属性:

You are missing quotes around the first text-danger class and you have two class attributes:

<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>

更多推荐

为什么我的特定CSS代码更改未反映在我的浏览器上?