インラインスタイルを使用せずにブートストラップCSSを上書きする方法は？

Question

私は、次のp要素のブートストラップのCSSを上書きしようとしている： https://gyazo.com/6bf5dde284fa53fd4c9cd098ddb1f109

（私はtop-margin: 10px;を追加し、ブートストラップの下の余白を削除したい）

を、私はそれを上書きするために得ることができる唯一の方法これまでは、避けたいと思うインライン・スタイリングを使用しています。また、本当に必要な場合を除き、!importantを避けたいと思います。私が試した

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

物事：：次のように

私の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コードには1つのpタグしかないので、試してみます：

すなわち、できるだけ多くの特異性を持つCSSセレクタを使用してください：

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