如何在不使用内联样式的情况下覆盖 Bootstrap CSS？

Question

我正在尝试覆盖以下 p 元素的 Bootstrap 的 CSS： https://gyazo.com/6bf5dde284fa53fd4c9cd098ddb1f109

（我想添加一个top-margin: 10px; 并删除 Bootstrap 的底部边距）

到目前为止，我可以让它覆盖的唯一方法是使用我希望避免的内联样式。另外我想避免!important，除非真的有必要。

我的css文件排序如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/login.css">

我尝试过的事情：

<p id="pMargin">
#pMargin {
   margin: 10px 0px 0px 0px !important;
}

<p class="pMargin">
.pMargin {
   margin: 10px 0px 0px 0px !important;
}

#sdntLogForm p {
   margin: 10px 0px 0px 0px !important;
}

body p {
   margin: 10px 0px 0px 0px !important;
}

我的 HTML：

<!-- STUDENT TAB -->
<div id="student" class="tab-pane fade in active">
  <form id="sdntLogForm" class="form-container" action="#" method="post">
    <div class="error">
      <?php
        if(isset($error)){
          echo ($error);
        }
      ?>
    </div>
    <div class="form-group">
      <h1 class="formHeader">Student Login</h1>
      <label for="sdntLogEmail">Email address</label>
      <input type="email" class="form-control" id="sdntLogEmail" name="sdntLogEmail" placeholder="Email" tabindex="1" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
    </div>
    <div class="form-group">
      <label for="sdntLogPass">Password</label>
      <input type="password" class="form-control" id="sdntLogPass" name="sdntLogPass" placeholder="Password" tabindex="2">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" tabindex="3" id="sdntLogRemember" name="sdntLogRemember">Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-success btn-block" id="sdntLogSubmit" name="sdntLogSubmit" tabindex="4">Login</button>
    <p>If you don't have a student account, you can register one <a href="sdntRegister.php">here</a>.</p>
  </form>
</div>

Answer 1

那个链接在这里打开了一个空白页面，所以有点难以分辨，但是由于你在那个 HTML 代码中只有一个 p 标签，我试试看：

使用尽可能具体的 CSS 选择器，即：

div#student.tab-pane.fade.in.active form#sdntLogForm.form-container p { ... }