Blockquotes复制span标签上的引号

Question

我已将此css应用于我的页面：

blockquote ::before {
  content: "“";
}

blockquote ::after {
  content: "”";
}

它用于在引号之间放置blockquote，但是当我使用带有span标记的blockquote时，我得到了重复的引号。 （所有html都是由wysiwyg编辑器生成的）

图片html：

<blockquote>
<p>blockquote</p>
</blockquote>

<p>&nbsp;</p>

<blockquote>
<h1>blockquote</h1>
</blockquote>

<p>&nbsp;</p>

<blockquote>
<p><span style="font-size:20px;">blockquote</span></p>
</blockquote>

为什么会这样？

Answer 1

尝试

blockquote::before {
  content: "“";
}
blockquote::after {
  content: "”";
}

如果您使用空格，则选择器与::before的所有后代的::after和blockquote匹配。

如果没有空格，规则只会与::before的{​​{1}}和::after匹配，因此您不会有重复引号，即使没有后代也会有效

Answer 2

blockquote ::before

          ^

你有空间。这是a descendant combinator。

你没有在blockquote之前和之后加上引号，你将它们放在里面的每个元素之前和之后（即段落和跨度）。< / p>

删除空格：blockquote::before和blockquote::after。