我在Bootstrap / Sass代码中使用第一个和最后一个伪类时遇到麻烦。基本上，我希望仅在第一个和最后一个标题的上方/下方创建一堆空白。指南针正在运行，并没有给我一个错误，但是当我在浏览器中硬刷新页面时，没有任何变化。这是我的代码，首先是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在此时要做什么，任何见识将不胜感激！
只是一点错字
h1:first-child, h1:last-child {
margin-top: 200 px;
}
应该
h1:first-child, h1:last-child {
margin-top: 200px;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句