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

Question

我想知道为什么浏览器只在第一个元素上展示双引号，而在第二个元素上却展示单引号。

我想知道为什么浏览器只在第一个元素上展示双引号，而在第二个元素上却展示单引号。

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

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

- Pavan Tiwari

---

“open-quote”表示“开始引用”。它不是指双引号字符。 - Bergi

在Internet Explorer 11中，它们都是双开引号。 - user9567282

Answer 1

你的开放引号没有结束，因此浏览器会做出“智能”判断，认为你将要嵌套引号，导致第一个元素有双重外引号，第二个元素有单一内引号。这是嵌套引用标点符号的工作方式。请参见维基百科和其中关于嵌套引言的参考文献。

值得注意的是，元素边界被忽略，因此即使您的第二个元素嵌套更深，或者两个元素都嵌套在自己的父元素中，它们仍然以同样的方式工作，这使它在可能包含不同种类和组合的措辞元素（a、br、code、em、span、strong等，以及 q 本身）的段落中特别有用。引号如何嵌套仅取决于当前已生成的 open-quote 和 close-quote 的数量，算法详见 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>

- BoltClock

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>

- Bourbia Brahim