Html CSS类选择器正在应用于未指定类的div？

我对CSS有点陌生，一直在苦苦思索为什么选择器一直应用于无类div。 以下是我的css代码：

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

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

.page-header p, .page-header 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>

{%if user.u经过身份验证%}
注销
查看我的差事
欢迎{{user.get_username}

{%else%}
登录
注册
您没有登录

{%endif%}
{%block content%}{%endblock content%}

第一个div正确地应用了page header类。问题是，即使没有指定类，底部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 %}

{%extends“base.html”%}
{%block content%}
注册
{%csrf_令牌%}
{{form.as_p}}
注册
{%endblock内容%}

任何帮助都将不胜感激

您可以使用css代码：

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

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

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

正在使用class.page header和表单元素将css应用于div中的p元素

从css中删除，form，这样它只适用于带有class.page头的div元素

更新

要使其仅应用于具有class.page标头的div内部的表单，请执行以下操作：

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

---

如果要使css生效到

页眉

div，请在

标记中指定类。请参见下面的css代码：

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

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

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

---

看起来它是在表单上应用它，而不是在div上。它应该可以正常工作。尝试在无类div上添加类。@cmac是的，您是对的，它将其应用于第二个div内的表单，即使第二个div是无类的。@Rigel1121尝试在无类div上添加一个类，甚至将值指定为！重要，但它没有帮助…嗯，我希望它应用于第一个div中的表单元素，而不是第二个div中没有指定页眉类的表单元素。