ทำไมเครื่องหมายคำพูดคู่จึงแสดงเฉพาะสำหรับองค์ประกอบแรก

ฉันสงสัยว่าทำไมเบราว์เซอร์จึงแสดงเครื่องหมายคำพูดเปิดคู่สำหรับองค์ประกอบแรกเท่านั้น องค์ประกอบที่สองมีเครื่องหมายคำพูดเดี่ยวแทน

a::before {
  content: open-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

คำพูดที่เปิดอยู่ของคุณจะไม่ถูกยกเลิกดังนั้นเบราว์เซอร์จึงตั้งสมมติฐาน "อย่างชาญฉลาด" ว่าคุณกำลังจะซ้อนคำพูดของคุณส่งผลให้เครื่องหมายคำพูดด้านนอกคู่สำหรับองค์ประกอบแรกและเครื่องหมายคำพูดด้านในเดี่ยวสำหรับส่วนที่สอง นี่คือวิธีการทำงานของเครื่องหมายวรรคตอนใบเสนอราคาในใบเสนอราคาที่ซ้อนกัน ดูWikipediaและการอ้างอิงถึงใบเสนอราคาที่ซ้อนกันในนั้น

โดยเฉพาะอย่างยิ่งขอบเขตขององค์ประกอบจะถูกละเว้นดังนั้นจึงไม่สำคัญว่าองค์ประกอบที่สองของคุณจะซ้อนกันลึกกว่าหรือถ้าองค์ประกอบทั้งสองซ้อนอยู่ในองค์ประกอบหลักของตัวเองก็จะยังคงทำงานในลักษณะเดียวกันซึ่งทำให้มีประโยชน์อย่างยิ่งในย่อหน้าที่อาจ มีชนิดที่แตกต่างกันและการรวมกันขององค์ประกอบถ้อยคำ ( a, br, code, em, span, strongฯลฯ เช่นเดียวกับqตัวเอง) วิธีการซ้อนคำพูดขึ้นอยู่กับจำนวนopen-quotes และclose-quotes ที่สร้างขึ้น ณ เวลาใดเวลาหนึ่งเท่านั้นและอัลกอริทึมมีรายละเอียดอยู่ในส่วนที่ 12.3.2 ของข้อกำหนด CSS2ซึ่งลงท้ายด้วยหมายเหตุต่อไปนี้:

บันทึก. ความลึกของการอ้างอิงไม่ขึ้นอยู่กับการซ้อนกันของเอกสารต้นทางหรือโครงสร้างการจัดรูปแบบ

ด้วยเหตุนี้จึงมีสองสิ่งที่เรียกว่า "วิธีแก้ปัญหา" สำหรับปัญหานี้ซึ่งทั้งสองอย่างเกี่ยวข้องกับการเพิ่ม::afterองค์ประกอบหลอกเพื่อให้สมดุลกับอัญประกาศเปิดชุดแรก

การแทรกคำพูดปิดโดยใช้::afterใบเสนอราคาสำหรับองค์ประกอบแรกจะถูกยกเลิกก่อนที่จะพบองค์ประกอบที่สองดังนั้นจึงไม่มีการซ้อนของใบเสนอราคา

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>

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>

เนื่องจากคุณไม่ได้ปิดคำพูดก่อนหน้านี้คำพูดถัดไปจะยังคงอยู่กับคำพูดหนึ่ง'เท่านั้น

ดังนั้นใช้องค์ประกอบหลอกafterด้วยcontent: close-quote

ดูตัวอย่างด้านล่าง:

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>

คุณยังสามารถแก้ไขเครื่องหมายคำพูดหลักและรองบนแท็กได้โดยใช้คุณสมบัติ CSS คำพูดดังต่อไปนี้:

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

ดูตัวอย่างด้านล่าง:

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>