Html 引导/sass中的第一个和最后一个孩子不工作_Html_Css_Twitter Bootstrap_Compass Sass_Pseudo Class

Html 引导/sass中的第一个和最后一个孩子不工作

html css twitter-bootstrap

Html 引导/sass中的第一个和最后一个孩子不工作,html,css,twitter-bootstrap,compass-sass,pseudo-class,Html,Css,Twitter Bootstrap,Compass Sass,Pseudo Class,在Bootstrap/Sass代码中使用第一个和最后一个子伪类时遇到问题。基本上，我只希望在第一个和最后一个标题的上方/下方创建一大堆空白。Compass正在运行，它没有给我一个错误，但是当我在浏览器中硬刷新我的页面时，没有任何变化。以下是我的代码，CSS优先： $headings-small-color: black; @import "bootstrap-compass"; @import "bootstrap-variables"; @import "bootstrap"; h1 {

在Bootstrap/Sass代码中使用第一个和最后一个子伪类时遇到问题。基本上，我只希望在第一个和最后一个标题的上方/下方创建一大堆空白。Compass正在运行，它没有给我一个错误，但是当我在浏览器中硬刷新我的页面时，没有任何变化。以下是我的代码，CSS优先：

$headings-small-color: black;

@import "bootstrap-compass";
@import "bootstrap-variables";
@import "bootstrap";

h1 {
  font-family: 'Almendra SC', serif;
}

h1:first-child, h1:last-child {
  margin-top: 200 px;
}

small {
  font-family: 'Fanwood text', serif;

}


<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Cat Graveyard</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="stylesheets/styles.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
  </head>

  <body>

    <img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-8 col-md-offset-2">
          <h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
          <h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
          <h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
        </div>
      </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html>

$headers小颜色：黑色；
@导入“引导罗盘”；
@导入“引导变量”；
@导入“引导”；
h1{
字体系列：“Almendra SC”，衬线；
}
h1：第一个孩子，h1：最后一个孩子{
边缘顶部：200像素；
}
小的{
字体系列：“Fanwood文本”，衬线；
}
猫墓地
这里躺着两个臭名昭著的胡须罪犯的可怜的受害者。
警告：下面是破损无生命物体的图形图像。
对于敏感的填充动物，建议观众自行决定。

我确实意识到更合适的“Sassy”方法是为这些伪类使用一个变量（如果你想给我一个例子，那我就可以了！），但现在我的目标只是让它工作

我假设我的问题与特殊性有关：引导。然而，我不知道如何解决这个问题。在Compass生成的CSS中，我为伪类编写的CSS最后出现。但是，当我在浏览器中“检查元素”时，它显示了覆盖我编写的CSS的引导CSS

IDK在这一点上做什么，任何洞察都将不胜感激

只是有点打字错误

h1:first-child, h1:last-child {
  margin-top: 200 px;
}

应该是

h1:first-child, h1:last-child {
  margin-top: 200px;
}