คู่มืออ้างอิงตัวประกอบ CSS

โซนปลายทาง CSS

โซนปลายทาง CSS ใช้ตั้งรูปแบบส่วนที่เฉพาะขององค์ประกอบ

ตัวอย่างเช่น，มันสามารถใช้เพื่อ:

  • ตั้งรูปแบบของตัวอักษรแรกหรือบรรทัดแรกขององค์ประกอบ
  • ใส่ข้อความลงก่อนหรือหลังเนื้อหาขององค์ประกอบ
  • ตั้งรูปแบบของสัญลักษณ์รายการ
  • ตั้งรูปแบบของภาพพื้นหลังของโซนการปรากฎของโซนปรากฎ

ตารางด้านล่างแสดงโซนปลายทางที่ต่างกันใน CSS:

โซนปลายทาง ตัวอย่าง คำอธิบายตัวอย่าง
::after p::after ใส่ข้อความลงหลังเนื้อหาขององค์ประกอบที่กำหนด
::backdrop dialog::backdrop ตั้งรูปแบบของภาพพื้นหลังของโซนการปรากฎของโซนการปรากฎหรือโซนปรากฎของโซนปรากฎ
::before p::before ใส่ข้อความลงก่อนเนื้อหาขององค์ประกอบที่กำหนด
::file-selector-button ::file-selector-button เลือกปุ่มที่มีชนิด <input type="file">
::first-letter p::first-letter เลือกตัวอักษรแรกของแถว <p>
::first-line p::first-line เลือกบรรทัดแรกของแถว <p>
::grammar-error ::grammar-error ตั้งรูปแบบของข้อความที่มีความผิดพลาดทางการเขียน
::highlight() ::highlight(custom-name) เลือกการเน้นสีที่กำหนดเอง
::marker ::marker เลือกสัญลักษณ์ของรายการที่เลือก
::placeholder input::placeholder ตั้งรูปแบบของข้อความตัวอย่างของฟอร์ม <input> หรือ <textarea>
::selection ::selection ตั้งรูปแบบของข้อความที่ผู้ใช้เลือก
::spelling-error ::spelling-error ตั้งรูปแบบของข้อความที่มีความผิดพลาดทางการเขียน
::view-transition ::view-transition แสดงโซนตัวเศรษฐีของการเปลี่ยนแปลงทัศน์ที่นำหน้าเพื่อรวมทั้งหมดของการเปลี่ยนแปลงทัศน์ที่อยู่บนหน้า
::view-transition-group ::view-transition-group แสดงกลุ่มภาพถ่ายของการเปลี่ยนแปลงทัศน์เดียว
::view-transition-image-pair ::view-transition-image-pair แสดงความหมายของโซนตัวเศรษฐี 'เก่า' และ 'ใหม่' ของการเปลี่ยนแปลงทัศน์ (ก่อนและหลังจากการเปลี่ยนแปลง)
::view-transition-new ::view-transition-new สถานะ “ใหม่” ของการเปลี่ยนแปลงที่แสดงชาติของมุมมอง
::view-transition-old ::view-transition-old สถานะ “เก่า” ของการเปลี่ยนแปลงที่แสดงชาติของมุมมอง