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 q
selbst). Wie Anführungszeichen verschachtelt sind, hängt ausschließlich von der Anzahl der zu einem bestimmten Zeitpunkt generierten open-quote
s und close-quote
s 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 ::after
das 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>
open-quote
nicht öffnet ein Angebot. Es bezieht sich nicht auf ein doppeltes Anführungszeichen.