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>


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>

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>


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:

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>

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.