Question

所以我正在修改我的个人网站并从头开始。我开始使用固定在底部的导航栏。但是，当我使用内部样式表插入CSS规则时，它按照我想要的方式工作，但是当我使用与外部样式表完全相同的规则时，边距不能正常工作。

具体来说，这是问题规则：

 .nav li {
      margin: -5px;
 }

使用内部样式表，它可以按预期运行，覆盖导航栏列表项之间不需要的空格（固定在底部的堆叠导航栏）。但是，当我将这个完全相同的规则放在外部工作表中时，它并没有掩盖那个空格。其他一些奇怪的行为是，如果我评论出“margin：-5px;”它没有任何改变，但是如果我注释掉所有规则“.nav li {margin：-5px;}它会将每个列表项的内容移动到左侧（应该使用”text-align：center“对齐）在另一条规则中。

我对这种奇怪的行为感到很困惑。谁能帮我？谢谢。

编辑：奇怪的是除了链接bootstrap，jquery等之外，html和css几乎不存在。我只是放入一个导航栏就是这样。

这是身体中的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>

与内部样式表相比，为什么在通过外部样式表插入时，完全相同的CSS应用方式不同？

1 个答案: