内部スタイルシートと比較して外部スタイルシートを使用して挿入すると、まったく同じCSSが異なるのはなぜですか？

Question

私は私の個人的なウェブサイトを改良しています。私は一番下に固定されているナビゲーションバーから始めます。しかし、CSSスタイルシートを使ってCSSルールを挿入すると、それは必要な方法で動作しますが、まったく同じルールを外部スタイルシートで使用すると、マージンが正しく機能しません。

具体的には、これは問題の規則である：、内部スタイルシートと

.nav li { 
     margin: -5px; 
} 

それ作用意図したとおり、積層ナビゲーションバーが上に固定されている私のナビゲーションバーのリスト項目（の間に不要な空白を隠蔽下）。 しかし、まったく同じルールを外部シートに入れても、その空白を隠すことはありません。私が「margin：-5px;」とコメントすると、他の奇妙な振る舞いがあります。それは何も変更しませんが、 ".nav li {margin：-5px;}ルールのすべてをコメントアウトすると、各リストアイテムのコンテンツが左に移動します（" text-align：center "を使用してセンタリングされるはずです）別のルールで

私は本当にこの奇妙な行動で混乱しています誰も私を助けることができるのおかげ

EDIT：。。？。奇妙なことは、HTMLとCSSなど、jqueryの、ブートストラップを結ぶ以外であるということですほとんど存在しない、私はちょうどナビゲーションバーに入れて、それはそれについてです

ここではHTMLが体内にあります：。。

   <div class="container-fluid"> 
    <nav class="navbar navbar-fixed-bottom"> 
      <ul class="nav nav-pills nav-stacked"> 
       <li><a class="about" href="about.html"><div class="navTileContent"><i class="glyphicon glyphicon-user" aria-hidden="true"></i><p>about</p></div></a></li> 
       <li><a class="portfolio" href="portfolio.html"><div class="navTileContent"><i class="glyphicon glyphicon-briefcase" aria-hidden="true"></i><p>portfolio</p></div></a></li> 
       <li><a class="art" href="art.html"><div class="navTileContent"><i class="glyphicon glyphicon-edit" aria-hidden="true"></i><p>art</p></div></a></li> 
       <li><a class="contact" href="contact.html"><div class="navTileContent"><i class="glyphicon glyphicon-envelope" aria- hidden="true"></i><p>contact</p></div></a></li> 
      </ul> 
     </nav> 

    </div> 

そして、ここでは、私が持っている唯一のCSSです：これは、スタイルはあなたとは一致しませんが、私はあなたが見る願っていますので、使用例の非常に単純なソートであることを意味する

<style> 

     .nav li { 
      margin: -5px; 
     } 

     .nav li .navTileContent { 
      color: #e1e8f4; 
      text-align: center; 
      padding: 1%;  
     } 

     .nav li .navTileContent p { 
      padding-left: 20px; 
      display: inline; 
     } 

     .about { 
      background-color: #6ad8d1; 
     } 

     .portfolio { 
      background-color: #12d132; 
     } 

     .art { 
      background-color: #12466b; 
     } 

     .contact { 
      background-color: #0d336d; 
     } 

    </style> 

Answer 1

何私は言おうとしている。

<style> 
 
    li { 
 
    color: orange; 
 
    } 
 
    li.active { 
 
    color: blue; 
 
    } 
 
    li.muted { 
 
    color: red; 
 
    } 
 
</style> 
 
<style> 
 
    li { 
 
    color: blue; 
 
    } 
 
    li.active { 
 
    color: orange; 
 
    } 
 
</style> 
 
<ul> 
 
    <li>Notice this is not orange</li> 
 
    <li class="active">Notice this is orange</li> 
 
    <li class="muted">notice this is red, because nothing has overwritten it's style definition</li> 
 
</ul>