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

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 的数量,并且该算法在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>

Answer 2

这是因为您没有关闭之前的报价,下一个报价将只保留一个'.

所以使用伪元件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>

您还可以使用引号 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>