ประเภท CSS ปลายเมื่อมองเห็น

อะไรคือพีโซเอลิเมนต์?

พีโซเอลิเมนต์ CSS ใช้เพื่อตั้งรูปแบบส่วนที่กำหนดขององค์ประกอบ

ตัวอย่างเช่น มันสามารถใช้ได้:

  • ตั้งรูปแบบของตัวอักษรแรก หรือบรรทัดแรกขององค์ประกอบ
  • ใส่เนื้อหาก่อนหน้าหรือหลังเนื้อหาขององค์ประกอบ

การใช้งานภาษา

การใช้งานภาษาของพีโซเอลิเมนต์:

selector::pseudo-element {
  property: value;
}

::first-line พีโซเอลิเมนต์

::first-line พีโซเอลิเมนต์ใช้เพื่อเพิ่มสไตล์พิเศษสำหรับบรรทัดแรกของข้อความ。

ตัวอย่างด้านล่างนี้จัดรูปแบบของบรรทัดแรกใน <p> ทั้งหมด:

ตัวอย่าง

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

ลองทดสอบด้วยตัวเอง

จำเป็นต้องระวัง:::first-line พีโซเอลิเมนต์สามารถใช้งานกับองค์ประกอบบล็อคเท่านั้น。

ทางนี้มีความเหมาะสมกับพีโซเอลิเมนต์ ::first-line พีโซเอลิเมนต์:

  • เนื้อที่ของแบบอักษร
  • เนื้อที่ของสี
  • เนื้อที่ของพื้นหลัง
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

โปรดระวัง:การใช้งานสัญลักษณ์เดี่ยวในสองคำ - ::first-line เปรียบเทียบ :first-line

ใน CSS3 สัญลักษณ์เดี่ยวในสองคำที่แทนที่มาตราฐานสัญลักษณ์เดียวของพีโซเอลิเมนต์ คือ W3C พยายามแยกของพีโคลนและพีโซเอลิเมนต์ความพยายามของ

ใน CSS2 และ CSS1 พีโคลนและพีโซเอลิเมนต์ทั้งหมดใช้การใช้งานภาษาด้วยมาตราฐานสัญลักษณ์เดียว:

เพื่อความสามารถที่จะใช้งานร่วมกันกับปัจจุบัน พีโซเอลิเมนต์ CSS2 และ CSS1 สามารถรับการใช้งานทางภาษาด้วยความหมายของมาตราฐานสัญลักษณ์เดียว:

::first-letter พีโซเอลิเมนต์

::first-letter พีโซเอลิเมนต์ใช้เพื่อเพิ่มสไตล์พิเศษสำหรับตัวอักษรแรกของข้อความ。

ตัวอย่างด้านล่างนี้จัดรูปแบบของตัวอักษรแรกของข้อความใน <p> ทั้งหมด:

ตัวอย่าง

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

ลองทดสอบด้วยตัวเอง

จำเป็นต้องระวัง:::first-letter พีโซเอลิเมนต์มีความเหมาะสมกับองค์ประกอบบล็อคเท่านั้น。

ขอบเขตที่ใช้สำหรับ พีโซเอลิเมนต์ ::first-letter:

  • เนื้อที่ของแบบอักษร
  • เนื้อที่ของสี
  • เนื้อที่ของพื้นหลัง
  • เนื้อที่ของขอบนอก
  • เนื้อที่ของขอบภายใน
  • เนื้อที่ของชานเขต
  • text-decoration
  • vertical-align (เฉพาะเมื่อ float ใช้แบบ none)
  • text-transform
  • line-height
  • float
  • clear

ตัวแทนและคลาส CSS

ตัวแทนสามารถนำมาใช้ร่วมกับคลาส CSS

ตัวอย่าง

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

ลองทดสอบด้วยตัวเอง

ตัวอย่างด้านล่างนี้จะแสดงข้อความของ class="intro" ด้วยสีแดงและขนาดตัวอักษรใหญ่

ตัวแทนหลายตัว

ยังสามารถทำการรวมตัวแทนหลายตัวกันได้

ในตัวอย่างด้านล่างนี้ ตัวอักษรแรกของย่อหน้าจะเป็นสีแดง ขนาดของตัวอักษร xx-large บรรทัดที่เหลือจะเป็นสีฟ้า และใช้ตัวอักษรที่เล็กในแบบหลักและเอกสารที่มีขนาดปกติ ของย่อหน้าอื่นจะเป็นขนาดปกติและสีปกติ:

ตัวอย่าง

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

ลองทดสอบด้วยตัวเอง

CSS - ตัวแทน ::before

::before ตัวแทนสามารถใช้เพื่อใส่ข้อความบนองค์ประกอบก่อนข้อความ

ตัวอย่างด้านล่างนี้ทำให้ภาพถูกใส่ขึ้นก่อนข้อความในองค์ประกอบ <h1> แต่ละตัว:

ตัวอย่าง

h1::before {
  content: url(smiley.gif);
}

ลองทดสอบด้วยตัวเอง

CSS - ตัวแทน ::after

::after ตัวแทนสามารถใช้เพื่อใส่ข้อความบนองค์ประกอบหลังข้อความ

ตัวอย่างด้านล่างนี้ทำให้ภาพถูกใส่ขึ้นหลังข้อความในองค์ประกอบ <h1> แต่ละตัว:

ตัวอย่าง

h1::after {
  content: url(smiley.gif);
}

ลองทดสอบด้วยตัวเอง

CSS - ตัวแทน ::selection

::selection ตัวแทนที่สามารถใช้ในประเภทแฟลงของ CSS โดยมีความหมายกับส่วนที่มีการเลือกโดยผู้ใช้

CSS หลักของนี้สามารถนำมาใช้กับ ::selection:

  • color
  • background
  • cursor
  • outline

ตัวอย่างด้านล่างนี้ทำให้ข้อความที่เลือกแสดงด้วยสีแดงบนพื้นที่ที่มีสีส้มเพื่ออัปไลน์:

ตัวอย่าง

::selection {
  color: red; 
  background: yellow;
}

ลองทดสอบด้วยตัวเอง

ทั้งหมด CSS พีซึ่งไม่เป็นองค์ประกอบทางเลือก

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
::after p::after ใส่ข้อความหลังในองค์ประกอบ <p> แต่ละตัว。
::before p::before ใส่ข้อความล่วงหน้าในองค์ประกอบ <p> แต่ละตัว。
::first-letter p::first-letter เลือกตัวอักษรแรกขององค์ประกอบ <p> แต่ละตัว。
::first-line p::first-line เลือกบรรทัดแรกขององค์ประกอบ <p> แต่ละตัว。
::selection p::selection เลือกส่วนที่ถูกเลือกโดยผู้ใช้

ทั้งหมด CSS พีซ่าล

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
:active a:active เลือกลิงก์ที่กำลังใช้งาน
:checked input:checked เลือกแถว <input> ที่ถูกเลือก
:disabled input:disabled เลือกแถว <input> ที่ไม่สามารถใช้งาน
:empty p:empty เลือกแถว <p> ที่ไม่มีลูก
:enabled input:enabled เลือกแถว <input> ที่สามารถใช้งาน
:first-child p:first-child เลือกแถว <p> ที่เป็นลูกแรกของพ่อ
:first-of-type p:first-of-type เลือกแถว <p> ที่เป็นลูกแรกของพ่อ
:focus input:focus เลือกแถว <input> ที่ได้รับความสนใจ
:hover a:hover เลือกลิงก์ที่มีปลายเมาส์หลงเหนือ
:in-range input:in-range เลือกแถว <input> ที่มีค่าในระยะที่กำหนด
:invalid input:invalid เลือกแถว <input> ที่มีค่าที่ผิดปกติ
:lang(language) p:lang(it) เลือกแถว <p> ที่มีค่าของ属性 lang ที่เริ่มต้นด้วย 'it'
:last-child p:last-child เลือกแถว <p> ที่เป็นลูกสุดท้ายของพ่อ
:last-of-type p:last-of-type เลือกแถว <p> ที่เป็นลูกสุดท้ายของพ่อ
:link a:link เลือกลิงก์ที่ยังไม่ถูกเข้าถึง
:not(selector) :not(p) เลือกแถวที่ไม่ใช่ <p> ทุกแถว
:nth-child(n) p:nth-child(2) เลือกแถว <p> ที่เป็นลูกที่สองของพ่อ
:nth-last-child(n) p:nth-last-child(2) เลือกแถว <p> ที่เป็นลูกโดยอ้างอิงจากลูกสุดท้ายของพ่อ
:nth-last-of-type(n) p:nth-last-of-type(2) เลือกองค์ประกอบ <p> ที่เป็นลูกที่สองของพ่อของมัน นับจากลูกที่สุด
:nth-of-type(n) p:nth-of-type(2) เลือกองค์ประกอบ <p> ที่เป็นลูกที่สองของพ่อของมัน
:only-of-type p:only-of-type เลือกองค์ประกอบ <p> ที่เป็นลูกเดียวของพ่อของมัน
:only-child p:only-child เลือกองค์ประกอบ <p> ที่เป็นลูกเดียวของพ่อของมัน
:optional input:optional เลือกองค์ประกอบ <input> ที่ไม่มีค่า "required"
:out-of-range input:out-of-range เลือกองค์ประกอบ <input> ที่ค่านั้นอยู่นอกช่วงที่กำหนด
:read-only input:read-only เลือกองค์ประกอบ <input> ที่กำหนดค่า "readonly"
:read-write input:read-write เลือกองค์ประกอบ <input> ที่ไม่มีค่า "readonly"
:required input:required เลือกองค์ประกอบ <input> ที่กำหนดค่า "required"
:root root เลือกองค์ประกอบรากขององค์ประกอบ
:target #news:target เลือกส่วนที่กำลังทำงานของ #news อิเล็กทรอนิกส์ (คลิกที่มี URL ที่มีชื่อโซ่นี้)
:valid input:valid เลือกส่วนที่มีค่าที่ถูกต้อง <input> อิเล็กทรอนิกส์
:visited a:visited เลือกลิงก์ที่เคยเข้าชมทั้งหมด