无法缩小Bootstrap页面中blockquote的字体大小求助

嘿，这个问题我遇过好多次——Bootstrap默认对<blockquote>内部的<p>标签做了独立的字体大小设置，所以你直接修改<blockquote>的font-size只会影响到元素的边距等属性，却不会改变文本本身的大小。

问题根源 #

Bootstrap的默认样式里包含类似这样的规则：

blockquote p {
  font-size: 1.25rem;
}

这个选择器的优先级比你只针对<blockquote>设置的样式更高，而且它直接控制了文本所在的<p>标签字体大小，所以你的blockquote { font-size: 1em; }不会生效在文本上。

解决方案 #

你只需要把字体大小的规则直接应用到<blockquote>内部的<p>标签上即可，下面是修改后的完整CSS代码示例：

blockquote {
  font-family: Georgia, serif;
  font-style: italic;
  margin: 3em auto !important;
  padding: 0.35em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}
/* 新增针对blockquote内p标签的字体设置 */
blockquote p {
  font-size: 1em; /* 替换成你想要的字体大小 */
}
blockquote:before {
  display: block;
  /* 补全你之前未写完的:before样式，比如：
  content: "\201C";
  font-size: 8em;
  position: absolute;
  left: -10px;
  top: -0.1em;
  color: #7a7a7a;
  */
}

额外提示 #

• 确保你的自定义CSS文件在Bootstrap的CSS文件之后加载，这样你的样式优先级才会更高。
• 尽量避免滥用!important，除非遇到特殊的优先级冲突场景，直接针对<blockquote p>设置样式是更优雅的方式。

内容的提问来源于stack exchange，提问作者nCardot