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;
}

将CSS应用于Div内部的P元素，使用类。页面 - 标语和表单元素。

从您的CSS中删除，form ，因此仅适用于class .page-header

update

使其仅适用于Div内部的形式。页面标头：

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