Question

我对CSS有点陌生，并且一直在为为什么选择器一直应用于无类div而苦苦挣扎。这是我的CSS代码：

.page-header p, form{
    font-family: 'Raleway', sans-serif;
    float: right;
    margin: 5px;
    padding-top: 30px;
}

这是我的HTML代码：

    <div class="page-header">

        {% if user.is_authenticated %} 

        <form action = "{% url 'logout' %}">
          <button type="submit">Logout</button>
        </form>
        <form action = "{% url 'errandlist' %}">
          <button type="submit">View my errands</button>
        </form>
        <p>Welcome {{ user.get_username }}.</p>

        {% else %}

        <form action = "{% url 'login' %}">
          <button type="submit">Login</button>
        </form>
        <form action = "{% url 'signup' %}">
          <button type="submit">Sign up</button>
        </form>
        <p>You are not logged in.</p>

        {% endif %}

        <h1><a href="/">bingoHelper</a></h1>
    </div>

    <div>
    {% block content %}{% endblock content %}
    </div>

第一个div正确地应用了页眉类。问题是，即使未指定任何类，底部div仍会使用page-header类。例如，在以下显示块内容的HTML文件中，该窗体向右浮动并具有Raleway字体：

{% extends "base.html" %}

{% block content %}
  <h2>Sign up</h2>
  <form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Sign up</button>
  </form>
{% endblock content %}

任何帮助将不胜感激！

Answer 1

如果要使CSS生效至page-header div，请在<form>标记中指定类。参见下面的CSS代码：

.page-header p, .page-header form{
    font-family: 'Raleway', sans-serif;
    float: right;
    margin: 5px;
    padding-top: 30px;
}

Answer 2

您的CSS代码：

.page-header p, form{
  font-family: 'Raleway', sans-serif;
  float: right;
  margin: 5px;
  padding-top: 30px;
}

正在使用.page-header AND 表单元素类将css应用于div中的p元素。

从CSS中删除表单，因此它仅适用于.page-header类的div元素

更新

要使其仅适用于div类为.page-header的表单：

.page-header p, .page-header > form {
  font-family: 'Raleway', sans-serif;
  float: right;
  margin: 5px;
  padding-top: 30px;
}

CSS类选择器是否应用于未指定类的div？

2 个答案: