bootstrap / sass中的第一个和最后一个孩子不起作用答案

【问题标题】：First- and last-child in bootstrap/sass not workingbootstrap / sass中的第一个和最后一个孩子不起作用
【发布时间】：2014-10-09 12:18:54
【问题描述】：

在我的 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>

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

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

IDK 在这一点上做什么，任何见解将不胜感激！

【问题讨论】：

标签： html css twitter-bootstrap compass-sass pseudo-class

【解决方案1】：

有点错别字

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

应该是

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

【讨论】：