html - 如何在不使用内联样式的情况下覆盖 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 { ... }