我有以下CSS:
workoutcal.css:
.errorlist{
color:red;
}
以下基本模板:
base.html文件:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}Default Title{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/workoutcal.css' %}">
</head>
<body>
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
<div class="hidden" id="hidden">
{% block hidden %}{% endblock %}
</div>
</body>
</html>
以及从中继承的以下模板:
{% extends "workout/base.html" %}
{% block content %}
<h1>Register new user</h1>
<form action="/workoutcal/register/" method="post">
{% csrf_token %}
{{ form.non_field_errors }}
{% for field in form.visible_fields %}
<div class="row">
<div class="col-xs-2">
{{ field.label_tag }}
</div>
<div class="col-xs-2">
{{ field }}
</div>
<div class="col-xs-3">
{{ field.errors }}
</div>
</div>
{% endfor %}
<input type="submit" value="Register">
</form>
{% endblock %}
如果有任何错误,它们将导致<ul>
元素在浏览器中呈现.errorlist
类:
<div class="row">
<div class="col-xs-2">
<label for="id_username">Username:</label>
</div>
<div class="col-xs-2">
<input type="text" name="username" value="sahand" maxlength="150" required id="id_username" />
</div>
<div class="col-xs-3">
<ul class="errorlist"><li>A user with that username already exists.</li></ul>
</div>
</div>
我希望这个ul
列表中的文本是红色的,因为我已经尝试使用我的CSS中的规则。 CSS包含在浏览器中呈现的HTML中:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Default Title</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/static/css/workoutcal.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
它在最后的link
标签中。它也是head
元素中最后一个CSS。为什么错误文本不是红色的?
试试吧
<div class="col-xs-3">
<ul><li class="errorlist">A user with that username already exists.</li></ul>
</div>
这可能是因为其他CSS声明覆盖了它。可能有一个关于li
元素的声明,使它们变黑。
如果是这种情况,请将您的CSS更改为:
.errorlist li {
color:red;
}
Daniel Roseman明智地建议转到CSS的URL。我做了,并看到我的CSS规则使错误文本变为红色不存在。我在文本编辑器中再次保存并重新加载它,它突然出现在通过浏览器加载的CSS文件中,文本变为红色。好像我没有保存它,我的坏。