无法减小块引用字体大小

Question

我用 Bootstrap 创建了一个基本页面，但无法缩小块引号的字体大小。当我更改 CSS font-size 属性时，边距会发生变化，因为它们是基于它的，但文本本身的大小不会。

代码笔

以下是应用于块引用的 CSS：

blockquote {
  font-family: Georgia, serif;
  font-size: 1em;
  font-style: italic;
  margin: 3em auto !important;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}
blockquote:before {
  display: block;
  padding-left: 10px;
  content: "201C";
  font-size: 80px;
  /* Element with abolute positioning is positioned relative to nearest positioned ancestor */
  position: absolute;
  /* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
  left: -20px; /* Negative moves it left */
  top: -20px; /* Negative moves it toward top */
  color: #7a7a7a;
}
blockquote cite {
  color: #999;
  font-size: 14px;
  margin-top: 5px;

Answer 1

如果要

更改块引用内文本的字体大小，则必须像这样定义块引用内<p>标签的字体大小属性

blockquote p {
    font-size: 0.8em !important;
}

！重要的是这里必须这样做，它将覆盖引导程序中定义的字体大小。

你不能像这样直接使用 CSS

blockquote {
font-size: 30px;
}

因为此标记具有自己的font-size属性。

块引用和p标签之间的关系是CSS组合器

Answer 2

blockquote覆盖你的css，所以你必须!important添加到定义中。
例如：

 font-size: 1em!important;

但是如果你想改变p标签：

blockquote p{
  font-size:1em;
}

Answer 3

这只是因为<blockquote>是外部元素。内部元素是<p>的，因此您必须将更改应用于<p>本身。

blockquote{
font-size:30px;
}
p{
font-size:25px;
}

<blockquote>
        <p>A wise man proportions his belief to the evidence.</p>
</blockquote>

或者如果你想使用 blockquote 的字体大小，你必须使用这样的!important：

blockquote{
font-size:30px !important;
}