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

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

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

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

您的开放引号不会终止，因此浏览器会假设您要嵌套引号，这是“聪明”的假设，导致第一个元素的双引号和第二个元素的单引号。这就是引用标点符号在嵌套引用中的工作方式。参见Wikipedia及其中对嵌套引用的引用。

值得注意的是，元素边界被忽略，因此即使第二个元素嵌套得更深或两个元素都嵌套在其自己的父元素中也没关系，它仍将以相同的方式工作，这使其在可能含有不同种类和措辞要素的组合（a，br，code，em，span，strong，等等，以及q本身）。引号的嵌套方式仅取决于在任何时间点生成的open-quotes和close-quotes 的数量，并且该算法在CSS2规范的12.3.2节中进行了详细说明，并以以下注释结尾：

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

为此，有两个所谓的“解决方案”，都涉及添加一个::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>

这是因为您没有关闭前一个引号，下一个引号将仅保留一个'。

所以使用伪元件after与content: close-quote

请参见以下代码段：

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 
 }

请参见以下代码段：

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>