WordPress中Blockquote引号内联且保留段落的CSS问题解决

我为WordPress的blockquote自定义了首尾引号样式，CSS代码如下：

/* blockquote */
blockquote {
  border-left: 3px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 30px 0.5em 20px;
  font-style: italic!important;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #ccc;
  content: close-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

为了让引号与内容内联而非上下分离，我加了这段CSS：

blockquote p {
display:inline;
}

单段落时效果没问题，但多段落的话，段落格式就没了。怎么才能既让引号和内容内联，又保留段落结构？

别把blockquote p设成inline，换个思路：把开头引号绑定到第一个段落，结尾引号绑定到最后一个段落，这样既能让引号和对应段落内联，又能保留段落的块级格式。修改后的CSS如下：

/* blockquote */
blockquote {
  border-left: 3px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 20px; /* 调整内边距，给引号腾空间 */
  font-style: italic!important;
  quotes: "\201C""\201D""\2018""\2019";
}

/* 开头引号加到第一个段落前 */
blockquote p:first-of-type:before {
  color: #ccc;
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

/* 结尾引号加到最后一个段落末尾 */
blockquote p:last-of-type:after {
  color: #ccc;
  content: close-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-left: 0.1em; /* 微调引号和文本的间距 */
  vertical-align: -0.4em;
}

/* 保留段落默认的块级样式，自定义段落间距 */
blockquote p {
  margin-bottom: 1em;
}

blockquote p:last-of-type {
  margin-bottom: 0; /* 最后一段去掉底部间距，避免多余空白 */
}

为啥这么改 #

• 原来的blockquote:before和:after是加在整个blockquote容器上，容易和内容脱节；现在把引号绑定到具体段落，自然和文本内联。
• 保留<p>的块级属性，多段落时自动换行，段落间的间距也能正常控制。
• 调整了blockquote的内边距，避免引号超出边框范围。

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