不应用CSS规则
不应用CSS规则
提问于 2017-12-16 15:19:45
我有以下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-list中的文本是红色的，因为我试图用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-tag里。它也是head元素中的最后一个CSS。为什么错误文本不变成红色？
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-12-16 22:30:34
Daniel明智地建议访问CSS的URL。我做了，并看到我的CSS规则，使错误文本红色是不存在的。我再次将它保存在我的文本编辑器中并重新加载它，它突然出现在通过浏览器加载的CSS文件中，文本变成了红色。好像我没救它，我的错。
Stack Overflow用户
发布于 2017-12-16 15:36:57
试着
<div class="col-xs-3">
<ul><li class="errorlist">A user with that username already exists.</li></ul>
</div>Stack Overflow用户
发布于 2017-12-16 15:53:14
这可能是因为其他CSS声明正在覆盖它。在li元素上可能有一个声明，使它们变黑。
如果是这种情况，请将css更改为：
.errorlist li {
color:red;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47847093
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号