CSS open-quote显示1个引号

Question

我正在使用以下CSS在段落之前添加开放引号:

blockquote {
  padding: 22px;
  quotes: "\201C""\201D""\2018""\2019";
  font-size: 15px;
}
blockquote:before {
  color: #111;
  content: open-quote;
  font-size: 4em;
  line-height: 0;
  vertical-align: -0.4em;
}

当我添加两个以上的块引用时,它们只显示1个引号.我想要表现2 ".我无法弄清楚为什么会这样.请参阅jsfiddle例如.

http://jsfiddle.net/yg7j5mkm/

Answer 1

您必须在打开另一个之前关闭报价.

这里有一个解决方法:关闭引号,但不可见.

blockquote {
  padding: 22px;
  quotes: "\201C""\201D""\2018""\2019";
  font-size: 15px;
}
blockquote:before {
  color: #111;
  content: open-quote;
  font-size: 4em;
  line-height: 0;
  vertical-align: -0.4em;
}
blockquote:after {
  visibility: hidden;
  content: close-quote;
}

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

Answer 2

http://www.w3.org/TR/CSS21/generate.html#quotes-insert:

使用哪一对引号取决于引号的嵌套级别:当前发生之前所有生成的文本中"open-quote"的出现次数减去"close-quote"的出现次数.如果深度为0,则使用第一对,如果深度为1,则使用第二对,等等.

由于您没有close-quote在这里使用,对于您的第二次,blockquote您在其之前有一次出现open-quote,而没有close-quote- 意味着深度为1,因此使用您指定为第二对的引号.("嵌套"并不一定意味着blockquote此定义的嵌套元素.)

要解决此问题,请使用close-quote- 如果您不希望它们显示,请隐藏它们:

blockquote:after {
  content: close-quote;
  visibility:hidden; /* to hide closing quote – don’t use display:none here,
                        because that would mean close-quote is absent again */
}

http://jsfiddle.net/yg7j5mkm/2/