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

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也会以某种方式使用页眉类。例如，在以下显示块内容的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和表单元素将css应用于div内的p元素。

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

UPDATE

要使它仅适用于带有.page-header的div内部形式：

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