为什么只为第一个元素显示双引号？

Question

我想知道为什么浏览器只为第一个元素显示双引号。第二个元素用单引号代替。

a::before {
  content: open-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Answer 1

您的开放引号不会终止，因此浏览器会做出“智能”假设，即您将要嵌套引号，从而导致第一个元素的双外引号和第二个元素的单内引号。这就是引用标点在嵌套引用中的工作方式。请参阅Wikipedia 以及其中对嵌套引用的引用。

值得注意的是，元素边界被忽略了，所以即使你的第二个元素嵌套得更深或者两个元素都嵌套在它们自己的父元素中也没关系，它仍然会以相同的方式工作，这使得它在可能包含不同类型和短语元素组合的段落（a、br、code、em、span、strong 等，以及q 本身）。引号如何嵌套仅取决于在任何时间点已生成的open-quotes 和close-quotes 的数量，算法在section 12.3.2 of the CSS2 spec 中有详细说明，并以以下注释结尾：

注意。引用深度与源文档的嵌套或格式结构无关。

为此，这个问题有两个所谓的“解决方案”，都涉及添加一个::after 伪元素来平衡第一组开引号。

通过使用::after 插入右引号，第一个元素的引号在遇到第二个元素之前终止，因此没有引号嵌套。

a::before {
  content: open-quote;
}

a::after {
  content: close-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

如果您实际上不想渲染右引号，您仍然可以使用no-close-quote 阻止浏览器为第二个元素生成单引号。

a::before {
  content: open-quote;
}

a::after {
  content: no-close-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Answer 2

这是因为你没有关闭前面的引号，后面的引号将只保留一个 ' 。

所以使用伪元素after 和content: close-quote

见下sn-p：

a::before{
    content: open-quote;
}
a::after{
    content: close-quote;
}

<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

您还可以使用quotes CSS 属性编辑标签上的主引号和辅助引号，如下所示：

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

见下sn-p：

a {
  quotes: "“" "”" "“" "”";
}

a::before{
    content: open-quote;
}

<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>