Zastanawiam się, dlaczego przeglądarka wyświetla podwójne cudzysłowy otwarte tylko dla pierwszego elementu. Zamiast tego drugi element zawiera pojedyncze cudzysłowy.
a::before {
content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
html
css
pseudo-element
css-content
Pavan Tiwari
źródło
źródło
open-quote
nie otwiera cytat. Nie odnosi się do znaku podwójnego cudzysłowu.Odpowiedzi:
Twoje cudzysłowy otwarte nie są przerywane, więc przeglądarka przyjmuje „inteligentne” założenie, że masz zamiar zagnieździć cudzysłowy, co skutkuje podwójnymi cudzysłowami zewnętrznymi dla pierwszego elementu i pojedynczymi cudzysłowami wewnętrznymi dla drugiego. Tak działa interpunkcja w cudzysłowach w zagnieżdżonych cudzysłowach. Zobacz Wikipedię i zawarte w niej odniesienia do zagnieżdżonych cytatów.
Warto zauważyć, że granice elementów są ignorowane, więc nie ma znaczenia, nawet jeśli drugi element jest zagnieżdżony głębiej lub jeśli oba elementy są zagnieżdżone we własnych elementach nadrzędnych, nadal będzie działać w ten sam sposób, co czyni go szczególnie użytecznym w akapitach, które mogą zawierać różne rodzaje oraz kombinacje elementów frazowania (
a
,br
,code
,em
,span
,strong
, itp, a takżeq
sam). Zagnieżdżanie cudzysłowów zależy wyłącznie od liczbyopen-quote
s iclose-quote
s, które zostały wygenerowane w dowolnym momencie, a algorytm opisano szczegółowo w sekcji 12.3.2 specyfikacji CSS2 , kończąc na następującej uwadze:W tym celu istnieją dwa tak zwane „rozwiązania” tego problemu, z których oba obejmują dodanie
::after
pseudoelementu, aby zrównoważyć pierwszy zestaw otwartych cudzysłowów.Wstawienie zamykających cudzysłowów za
::after
pomocą cudzysłowu dla pierwszego elementu powoduje zakończenie przed napotkaniem drugiego elementu, dzięki czemu nie ma zagnieżdżania cytatów.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>
Jeśli faktycznie nie chcesz renderować cudzysłowów zamykających, nadal możesz uniemożliwić przeglądarce generowanie pojedynczych cudzysłowów dla drugiego elementu za pomocą
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>
źródło
Dzieje się tak, ponieważ nie zamknąłeś poprzednich kwotowań, następne cytaty pozostaną tylko z jednym
'
.więc użyj pseudoelementu
after
zcontent: close-quote
Zobacz poniższy fragment:
Pokaż fragment kodu
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>
Możesz również edytować główne i dodatkowe cudzysłowy na tagu, używając właściwości CSS cudzysłowów w następujący sposób:
a { quotes: "“" "”" "“" "”"; ^ ^ ^ ^ | | | | | | | |_ #secondary close quotes | | |_____ #secondary open quotes | |_________ #primary close quotes |_____________ #primary open quotes }
zobacz poniższy fragment:
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>
źródło