Pertanyaan Mengapa tanda kutip ganda hanya ditampilkan untuk elemen pertama?


Saya bertanya-tanya mengapa browser menunjukkan tanda kutip ganda hanya untuk elemen pertama. Elemen kedua memiliki tanda kutip tunggal sebagai gantinya.

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


asal


Jawaban:


Kutipan terbuka Anda tidak dihentikan, sehingga peramban membuat asumsi "cerdas" bahwa Anda akan menyarang tanda kutip Anda, menghasilkan tanda kutip ganda untuk elemen pertama dan tanda kutip tunggal untuk yang kedua. Ini adalah bagaimana tanda baca kutipan bekerja dalam kutipan bertingkat. Lihat Wikipedia dan referensi ke kutipan bertingkat di dalamnya.

Khususnya, batas-batas elemen diabaikan, jadi tidak masalah bahkan jika elemen kedua Anda bersarang lebih dalam atau jika kedua elemen bersarang di elemen induknya sendiri, itu akan tetap bekerja dengan cara yang sama, yang membuatnya sangat berguna dalam paragraf yang mungkin mengandung berbagai jenis dan kombinasi elemen penggambaran (a, br, code, em, span, strong, dll, juga q diri). Bagaimana kutipan diulang hanya bergantung pada jumlah open-quotes dan close-quotes yang telah dihasilkan pada setiap titik waktu, dan algoritma ini terperinci dalam bagian 12.3.2 dari spesifikasi CSS2, diakhiri dengan catatan berikut:

Catatan. Kedalaman kutipan tidak bergantung pada penumpukan dokumen sumber atau struktur pemformatan.

Untuk itu, ada dua yang disebut "solusi" untuk masalah ini, yang keduanya melibatkan penambahan ::after pseudo-element untuk menyeimbangkan set pertama dari kutipan terbuka.

Dengan memasukkan tanda kutip dekat menggunakan ::after kutipan untuk elemen pertama diakhiri sebelum elemen kedua ditemui sehingga tidak ada penumpukan kutipan.

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>

Jika Anda sebenarnya tidak ingin memberikan tanda kutip, Anda masih dapat mencegah browser menghasilkan tanda kutip tunggal untuk elemen kedua yang digunakan 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



Ini karena Anda tidak menutup tanda kutip sebelumnya, tanda kutip berikutnya akan tetap hanya dengan satu ' .

jadi gunakan elemen pseudo after dengan content: close-quote

Lihat cuplikan di bawah ini:

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>

Anda juga dapat mengedit tanda kutip primer dan sekunder pada tag dengan menggunakan tanda kutip Properti CSS sebagai berikut:

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

lihat cuplikan di bawah ini:

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