Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的公开引号不会被终止，因此浏览器会使＆＃34; smart＆＃34;假设您要嵌套引号，导致第一个元素的双引号和第二个元素的单引号。这就是引号标点在嵌套引号中的工作原理。请参阅Wikipedia以及其中嵌套引用的引用。

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

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

为此，有两个所谓的＆＃34;解决方案＆＃34;对于这个问题，两者都涉及添加::after伪元素来平衡第一组开放引号。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是因为您没有关闭之前的引号，下一个引号只会保留一个'。

因此请将伪元素after与content: close-quote

一起使用

见下面的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您还可以使用quotes CSS属性编辑标记的主要和次要引号，如下所示：

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

见下面的代码：

＆＃13;

a {
  quotes: "“" "”" "“" "”";
}

a::before{
    content: open-quote;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: