Warum werden doppelte Anführungszeichen nur für das erste Element angezeigt?

89

Ich frage mich, warum der Browser nur für das erste Element doppelte offene Anführungszeichen anzeigt. Das zweite Element hat stattdessen einfache Anführungszeichen.

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
Erweitern Sie das Snippet

html css pseudo-element css-content Pavan Tiwari
quelle
4
open-quotenicht öffnet ein Angebot. Es bezieht sich nicht auf ein doppeltes Anführungszeichen.
Bergi
5
In Internet Explorer 11 sind beide doppelte offene Anführungszeichen.

Antworten:

137

Ihre offenen Anführungszeichen werden nicht beendet, daher geht der Browser von der "intelligenten" Annahme aus, dass Sie Ihre Anführungszeichen verschachteln möchten, was zu doppelten äußeren Anführungszeichen für das erste Element und einfachen inneren Anführungszeichen für das zweite Element führt. So funktioniert die Interpunktion von Anführungszeichen in verschachtelten Anführungszeichen. Siehe Wikipedia und die darin enthaltenen Verweise auf verschachtelte Zitate.

Insbesondere werden Elementgrenzen ignoriert, sodass es keine Rolle spielt, ob Ihr zweites Element tiefer verschachtelt ist oder ob beide Elemente in ihren eigenen übergeordneten Elementen verschachtelt sind. Es funktioniert dennoch auf die gleiche Weise, was es besonders in Absätzen nützlich macht enthält unterschiedliche Arten und Kombinationen der Phrasierung Elemente ( a, br, code, em, span, strong, usw., wie auch qselbst). Wie Anführungszeichen verschachtelt sind, hängt ausschließlich von der Anzahl der zu einem bestimmten Zeitpunkt generierten open-quotes und close-quotes ab. Der Algorithmus wird in Abschnitt 12.3.2 der CSS2-Spezifikation beschrieben und endet mit dem folgenden Hinweis:

Hinweis. Die Angebotstiefe ist unabhängig von der Verschachtelung des Quelldokuments oder der Formatierungsstruktur.

Zu diesem Zweck gibt es zwei sogenannte "Lösungen" für dieses Problem, bei denen beide ein Pseudoelement hinzufügen ::after, um den ersten Satz offener Anführungszeichen auszugleichen.

Durch das Einfügen enger Anführungszeichen wird ::afterdas Anführungszeichen für das erste Element beendet, bevor das zweite Element angetroffen wird, sodass keine Verschachtelung von Anführungszeichen erfolgt.

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>
Erweitern Sie das Snippet

Wenn Sie keine engen Anführungszeichen rendern möchten, können Sie dennoch verhindern, dass der Browser mithilfe des zweiten Elements einfache Anführungszeichen generiert 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>
Erweitern Sie das Snippet

BoltClock
quelle
35

Dies liegt daran, dass Sie die vorherigen Anführungszeichen nicht geschlossen haben. Die nächsten Anführungszeichen bleiben nur bei einem '.

Verwenden Sie also das Pseudoelement aftermitcontent: close-quote

Siehe unten Ausschnitt:

Code-Snippet anzeigen

Sie können die primären und sekundären Anführungszeichen eines Tags auch mithilfe der CSS-Eigenschaft " Anführungszeichen" wie folgt bearbeiten :

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

siehe unten Ausschnitt: 

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>
Erweitern Sie das Snippet

Springer F.
quelle