ตัวแทนผสม CSS

ตัวแทนผสม CSS

ตัวแทนผสมเป็นมาตรฐานที่ใช้ในการอธิบายความสัมพันธ์ระหว่างตัวเลือกตัว

เลือกตัวที่เป็น CSS สามารถมีหลายตัวเลือกตัวง่าย และสามารถใส่ตัวแทนผสมระหว่างตัวเลือกตัวง่าย

มีสี่ประเภทตัวแทนผสมที่แตกต่างกันใน CSS

  • เลือกตัวที่เป็นอิเลเมนต์ทั้งหมดที่อยู่ในหลักทางเดิน (ช่องว่าง)
  • เลือกตัวที่เป็นอิเลเมนต์ลูก (>)
  • เลือกตัวที่เป็นพี่น้องใกล้เคียง (+)
  • เลือกตัวที่เป็นบรรดาพี่น้อง (~)

เลือกตัวที่เป็นอิเลเมนต์ทั้งหมดที่อยู่ในหลักทางเดิน

เลือกตัวที่เป็นอิเลเมนต์ทั้งหมดที่อยู่ในหลักทางเดินของอิเลเมนต์ที่กำหนด

ตัวอย่างด้านล่างนี้เลือกส่วนทั้งหมดของ <p> ภายใน <div> อิเลเมนต์

ตัวอย่าง

div p {
  background-color: yellow;
}

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

เลือกตัวที่เป็นอิเลเมนต์ลูก

เลือกตัวที่เป็นอิเลเมนต์ลูกของอิเลเมนต์ที่กำหนด

ตัวอย่างด้านล่างนี้เลือกส่วนทั้งหมดของ <p> ภายในอิเลเมนต์ลูกของ <div>

ตัวอย่าง

div > p {
  background-color: yellow;
}

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

เลือกตัวที่เป็นพี่น้องใกล้เคียง

เลือกตัวที่เป็นพี่น้องใกล้เคียงของอิเลเมนต์ที่กำหนด

อิเลเมนต์ที่เป็นพี่น้องต้องมีเพื่อนบ้านเดียวกัน，“ใกล้เคียง”หมายถึง“ตามมาหลังจากนั้น”

ตัวอย่างด้านล่างนี้เลือกส่วนทั้งหมดของ <p> ภายในอิเลเมนต์ที่ตามมาหลังจาก <div>

ตัวอย่าง

div + p {
  background-color: yellow;
}

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

เลือกตัวที่เป็นบรรดาพี่น้อง

เลือกตัวที่เป็นบรรดาพี่น้องของอิเลเมนต์ที่กำหนด

ตัวอย่างด้านล่างนี้เลือกส่วนทั้งหมดของ <p> ภายใน同级ฝายของ <div> อิเลเมนต์

ตัวอย่าง

div ~ p {
  background-color: yellow;
}

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

เลือกตัวทั้งหมดที่มี CSS ผสมทั้งหมด

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
element element div p เลือกส่วนทั้งหมดของ <p> ภายใน <div> อิเลเมนต์
element>element div > p เลือกแต่ละ <p> ที่อยู่ภายใน <div> หน้าตั้งต้น
element+element div + p เลือกแต่ละ <p> ที่ตามมาหลังจาก <div> หน้าตั้งต้น
element1~element2 p ~ ul เลือกแต่ละ ul ที่มี <p> หน้าตั้งต้น

อ่านเพิ่มเติม

หนังสือเรียนนอก:CSS ในโค้ด element หลังเดี่ยว element ในโค้ด

หนังสือเรียนนอก:CSS ในโค้ด element หลัง element ในโค้ด

หนังสือเรียนนอก:CSS ในโค้ด element ในโค้ด element