css - 无法更改 Bootstrap "well"组件中的字体系列

Question

我有一个很好的 boostrap 组件，其中包含一些文本

 <div class="well well-sm" id="well_job">

                            <p>
                               <h5><%= "#{job.job_description}" %></h5>
                            </p>
                            <p>
                              <h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
                            </p>
                    </div>  

当我尝试通过其中一个类选择它来更改字体系列时，它没有改变(我试图通过 .well-sm 选择它，但也没有任何变化):

    .well{
      font-family: 'Rock Salt', cursive;
}

如何选择井并将字体大小更改为其内部文本？

Answer 1

首先，您的语法不正确，因为您不能将标题标记放在段落标记内。以下语法

<p>
  <h1>Some Header</h1>
</p>

将被浏览器解释为

<p></p>
   <h1>Some Header</h1>
</p>

你最终会得到意想不到的 </p>结束标记。验证您的 html 将导致此错误:

No p element in scope but a p end tag seen.

回到您的问题，如果使用 header 标签，您还需要指定针对特定 header 标签的样式。

.well {
  font-size: 14px;
}
.well h5 {
  font-size: 24px;
}