Question

我使用Bootstrap创建了一个基本页面，但不能使我的blockquotes的字体大小变小。当我更改CSS font-size属性时，边距会发生变化，因为它们基于它，但文本本身的大小却没有。

这是用于blockquotes的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

如果您想更改 blockquote 中文字的字体大小，您必须在 blockquote 中定义<p>标记的字体大小属性，例如此

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

！important 必须在此处覆盖bootstrap中定义的字体大小。

你不能像这样直接使用 CSS

blockquote {
font-size: 30px;
}

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

blockquote和p标签之间的关系是CSS Combinators

Answer 2

blockquote覆盖您的css，因此您必须将!important添加到difenittion。
例如：

 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;
}

无法减少blockquote字体大小

3 个答案: