สายพันธุ์หลักของตัวเลือก CSS คืออะไร?

Question

Accepted Answer

ตัวเลือกกำหนดเป้าหมายว่าองค์ประกอบใดที่ข้อกำหนดนั้นใช้กับ ตั้งแต่ธรรมดา (โดยแท็ก) ไปจนถึงตัวรวม (combinator) ที่ทรงพลัง ```css /* Basic selectors */ p { } /* type: all

*/ .card { } /* class: elements with class="card" (reusable) */ #header { } /* id: the one element with id="header" (unique) */ * { } /* universal: every element */ [type="text"]{ } /* attribute: inputs with type=text */ ``` ## ตัวรวม — ความสัมพันธ์ระหว่างองค์ประกอบ ```css .menu li { } /* descendant: any li INSIDE .menu (any depth) */ .menu > li { } /* child: only DIRECT children li */ h2 + p { } /* adjacent sibling: the p immediately AFTER an h2 */ h2 ~ p { } /* general sibling: all p siblings after an h2 */ ``` ความแตกต่างระหว่างเว้นวรรค (descendant) และ `>` (ลูกโดยตรง) มีความสำคัญ: `.menu li` ตรงกับ `li` ที่ซ้อนลึกด้วยเช่นกัน ขณะที่ `.menu > li` ตรงกับระดับสูงสุดเท่านั้น ## คลาสเทียมและองค์ประกอบเทียม ```css a:hover { } /* state: while hovered */ li:first-child { } /* structural: the first li */ li:nth-child(2n){ } /* every even li */ p::first-line { } /* pseudo-element: the first rendered line */ ``` ## การจัดกลุ่มและตัวเลือกสมัยใหม่ ```css h1, h2, h3 { } /* apply to all three */ :is(h1, h2) a { } /* :is() shortens long selector lists */ .card:has(img) { } /* :has() — a parent that CONTAINS an img */ ``` ## เหตุใดจึงมีความสำคัญ ตัวเลือกคือวิธีที่คุณเชื่อมต่อสไตล์กับมาร์กอัป การเรียนรู้คลาส (คนงาน) ตัวรวม (สำหรับความสัมพันธ์) และคลาสเทียมโครงสร้าง/สถานะ ช่วยให้คุณกำหนดเป้าหมายได้อย่างแม่นยำโดยไม่ต้องเพิ่มคลาสพิเศษทุกที่ — และตัวเลือกสมัยใหม่ `:is()`/`:has()` ทำให้การกำหนดเป้าหมายที่ซับซ้อนกระชับขึ้น สนับสนุนคลาสมากกว่า ids/ซ้อนหนัก เพื่อให้ specificity ยังคงจัดการได้