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

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

您的左引号没有终止，因此浏览器做出 "smart" 假设您将嵌套引号，导致第一个元素使用双外引号，第二个元素使用单内引号。这就是引用标点符号在嵌套引用中的工作方式。请参阅 Wikipedia 以及其中对嵌套引用的引用。

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

Note. The quoting depth is independent of the nesting of the source document or the formatting structure.

为此，有两个所谓的 "solutions" 来解决这个问题，这两个问题都涉及添加一个 ::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>

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

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

Why are double quotes shown only for the first element?

html

css

pseudo-element

css-content