Neden yalnızca ilk öğe için çift tırnak gösteriliyor?


89

Tarayıcının neden yalnızca ilk öğe için çift açık tırnak gösterdiğini merak ediyorum. İkinci öğenin bunun yerine tek tırnak işaretleri vardır.

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


4
open-quotegelmez açmak bir tırnak. Çift tırnak karakterine atıfta bulunmaz.
Bergi

5
Internet Explorer 11'de, ikisi de çift açık tırnak işaretidir.

Yanıtlar:


137

Açık teklifleriniz sonlandırılmaz, bu nedenle tarayıcı, tırnaklarınızı iç içe geçirmek üzere olduğunuz "akıllı" varsayımını yapar, bu da ilk öğe için çift dış tırnak ve ikinci öğe için tek iç tırnaklarla sonuçlanır. İç içe geçmiş alıntılarda alıntı noktalama bu şekilde çalışır. Wikipedia'ya ve buradaki iç içe alıntılara yapılan referanslara bakın .

Özellikle, öğe sınırları göz ardı edilir, bu nedenle ikinci öğeniz daha derine yerleştirilmiş olsa veya her iki öğe de kendi üst öğelerinde iç içe olsa bile, aynı şekilde çalışacaktır, bu da onu özellikle paragraflarda yararlı kılar. farklı ve phrasing elemanların bir kombinasyonu (içerir a, br, code, em, span, strong, vs., hem de qkendisini). Tekliflerin nasıl iç içe yerleştirildiği, yalnızca herhangi bir zamanda oluşturulan open-quotes ve close-quotelerin sayısına bağlıdır ve algoritma, CSS2 spesifikasyonunun 12.3.2 bölümünde ayrıntılı olarak aşağıdaki notla biter:

Not. Alıntı derinliği, kaynak belgenin yuvalanmasından veya biçimlendirme yapısından bağımsızdır.

Bu amaçla, bu soruna iki sözde "çözüm" vardır, her ikisi ::afterde ilk açık teklif kümesini dengelemek için sözde bir öğe eklemeyi içerir .

::afterBirinci elemanın tırnak işareti kullanılarak yakın alıntılar eklenerek , ikinci elemanla karşılaşılmadan önce sonlandırılır, böylece alıntılar iç içe geçmez.

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>

Aslında yakın alıntılar oluşturmak istemiyorsanız, tarayıcının ikinci öğe için tek tırnak oluşturmasını kullanarak yine de engelleyebilirsiniz 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

Bunun nedeni, önceki teklifleri kapatmamış olmanızdır, sonraki teklifler yalnızca bir teklifte kalacaktır '.

böylece sahte elemanı kullanma afterilecontent: close-quote

Aşağıdaki snippet'e bakın:

Ayrıca aşağıdaki gibi tırnak CSS özelliğini kullanarak bir etiketteki birincil ve ikincil tırnak işaretlerini düzenleyebilirsiniz :

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

aşağıdaki pasaja bakın:

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>

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.