Vraag Waarom worden dubbele aanhalingstekens alleen voor het eerste element getoond?


Ik vraag me af waarom de browser alleen dubbele openstaande aanhalingstekens toont voor het eerste element. Het tweede element heeft in plaats daarvan enkele aanhalingstekens.

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


90
2018-04-26 10:29


oorsprong


antwoorden:


Uw openstaande offertes worden niet beëindigd, dus de browser maakt de "slimme" aanname dat u op het punt staat om uw offertes te nesten, wat resulteert in dubbele buitencitaten voor het eerste element en enkele binnencitaten voor de tweede. Dit is hoe citaat leestekens werken in geneste citaten. Zien Wikipedia en de verwijzingen naar geneste citaten daarin.

Met name worden elementgrenzen genegeerd, dus het maakt niet uit, zelfs als uw tweede element dieper genest is of als beide elementen genest zijn in hun eigen bovenliggende elementen, zal het nog steeds op dezelfde manier werken, wat het bijzonder nuttig maakt in alinea's die mogelijk verschillende soorten en combinaties van fraseringselementen bevatten (a, br, code, em, span, strong, enz., evenals q zelf). Hoe citaten genest zijn, hangt alleen af ​​van het aantal open-quotes en close-quotes die op een bepaald moment zijn gegenereerd en het algoritme is beschreven in sectie 12.3.2 van de CSS2 spec, eindigend met de volgende opmerking:

Notitie. De quotatiediepte is onafhankelijk van het nesten van het brondocument of de opmaakstructuur.

Daartoe zijn er twee zogenaamde 'oplossingen' voor dit probleem, die beide betrekking hebben op het toevoegen van een ::after pseudo-element om de eerste set openstaande offertes te balanceren.

Door het invoegen van korte aanhalingstekens met behulp van ::after het citaat voor het eerste element wordt beëindigd voordat het tweede element wordt aangetroffen, dus er is geen nesten van citaten.

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>

Als u geen quotes in de buurt wilt weergeven, kunt u nog steeds voorkomen dat de browser enkele aanhalingstekens genereert voor het tweede element met 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>


137
2018-04-26 10:32



Dit komt omdat je de vorige aanhalingstekens niet hebt gesloten, de volgende aanhalingstekens zullen er maar één zijn ' .

gebruik dus het pseudo-element after met content: close-quote

Zie onderstaande fragment:

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>

U kunt ook de primaire en secundaire aanhalingstekens van een tag bewerken met behulp van citaten CSS-eigenschap als volgt:

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

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


34
2018-04-26 10:34