Question

我有以下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。为什么错误文本没有变成红色？

Answer 1

尝试

<div class="col-xs-3">
        <ul><li class="errorlist">A user with that username already exists.</li></ul>
</div>

Answer 2

这可能是因为其他CSS声明覆盖了它。可能在li元素上有一个声明使它们变黑。

如果是这种情况，请将您的css更改为：

.errorlist li {
    color:red;
}

Answer 3

丹尼尔罗斯曼明智地建议转到CSS的URL。我做了，并看到我的CSS规则使错误文本变红不在那里。我在文本编辑器中再次保存并重新加载它，它突然出现在通过浏览器加载的CSS文件中，文本变为红色。好像我没有保存它，我的不好。

CSS规则未应用

3 个答案: