Question

我在Bootstrap / Sass代码中使用first-last-child子类时遇到问题。基本上，我希望在第一个和最后一个标题的上方/下方创建一大堆空白区域。指南针正在运行，并没有给我一个错误，但是当我在浏览器中刷新页面时没有任何变化。这是我的代码，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>

我确实认识到更合适的＆＃34; Sassy＆＃34;方法是为这些伪类使用变量（如果你想给我一个例子，那对我来说没问题！），但是现在我的目标只是让它发挥作用。

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

IDK此时该做什么，任何见解都将不胜感激！

Answer 1

只是一个小错误

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

应该是

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

第一个和最后一个孩子在bootstrap / sass不工作

1 个答案: