ตัวเลือกและการเรียงซ้อน
เลือกองค์ประกอบด้วยตัวเลือกชนิด คลาส ID และแอตทริบิวต์ ทำความเข้าใจความจำเพาะ การสืบทอด และการเรียงซ้อน เพื่อคาดการณ์ว่ารูปแบบใดมีผล
ตัวเลือกและการเรียงซ้อน เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
CSS คืออะไร
CSS (สไตล์ชีตแบบเรียงซ้อน) คือภาษาที่ควบคุมการแสดงผลทางภาพ คุณเขียน กฎ โดยแต่ละกฎมี ตัวเลือก ที่ระบุองค์ประกอบเป้าหมาย และมี บล็อกการประกาศ ซึ่งประกอบด้วยคู่คุณสมบัติกับค่า
selector {
property: value;
another-property: value;
}ตัวเลือกตามชนิด คลาส และ ID
ตัวเลือกพื้นฐานสามประเภท ได้แก่ ชนิด ซึ่งเลือกองค์ประกอบทั้งหมดของแท็กหนึ่ง (p), คลาส ซึ่งเลือกองค์ประกอบที่มีคลาส (.card) และ ID ซึ่งเลือกองค์ประกอบหนึ่งรายการด้วยรหัส (#logo) ควรเลือกใช้คลาสมากกว่า เพราะ ID มีความจำเพาะเจาะจงสูงมาก
p { color: #333; } /* type */
.card { padding: 16px; } /* class */
#logo { width: 200px; } /* ID */ตัวเลือกตามแอตทริบิวต์และพิวโดคลาส
เลือกตามค่าแอตทริบิวต์ด้วย [type="email"] ใช้พิวโดคลาสสำหรับสถานะต่าง ๆ เช่น :hover, :focus, :active, :checked, :nth-child(), :first-child และ :last-child
input[type="email"] { border-color: blue; }
a:hover { text-decoration: underline; }
li:nth-child(odd) { background: #f5f5f5; }ตัวเชื่อม
ตัวเชื่อมอธิบายความสัมพันธ์ระหว่างองค์ประกอบ ได้แก่ ช่องว่าง (องค์ประกอบลูกหลาน), > (องค์ประกอบลูกโดยตรง), + (พี่น้องที่อยู่ติดกัน) และ ~ (องค์ประกอบพี่น้องทั่วไป)
nav a { color: white; } /* descendant */
nav > ul { list-style: none; } /* child */
h2 + p { margin-top: 0; } /* adjacent sibling */ความจำเพาะเจาะจง: ใครชนะ
เมื่อมีกฎหลายข้อระบุองค์ประกอบเดียวกัน ความจำเพาะเจาะจงจะเป็นตัวกำหนดว่ากฎใดมีผล ตัวเลือก ID (0,1,0,0) ชนะตัวเลือกคลาส (0,0,1,0) ซึ่งชนะตัวเลือกตามชนิด (0,0,0,1) สไตล์อินไลน์มีผลเหนือกว่าทั้งหมด ส่วน !important มีผลเหนือทุกอย่าง ควรใช้เป็นทางเลือกสุดท้าย
การคำนวณความจำเพาะเจาะจง
นับ ID, คลาส/แอตทริบิวต์/พิวโดคลาส และชนิดแยกกัน จากนั้นเปรียบเทียบทีละคอลัมน์ ตัวอย่างเช่น #nav .link:hover = (0,1,1,1) ส่วน .nav a = (0,0,1,1) ดังนั้นตัวเลือกแรกจึงชนะ
/* Specificity: 0,0,1,1 — loses */
.nav a { color: red; }
/* Specificity: 0,1,1,1 — wins */
#nav .link:hover { color: blue; }การเรียงลำดับแบบแคสเคด: ลำดับมีความสำคัญ
เมื่อความจำเพาะเจาะจงเท่ากัน กฎที่ปรากฏ ทีหลังในสไตล์ชีตจะมีผล นี่คือ C ใน CSS หรือการเรียงลำดับแบบแคสเคด ลำดับการนำเข้าและลำดับในแหล่งที่มาต่างก็มีความสำคัญ
การสืบทอด
คุณสมบัติ CSS บางอย่างจะถูกสืบทอดโดยค่าเริ่มต้น องค์ประกอบลูกจะได้รับค่าขององค์ประกอบแม่โดยที่คุณไม่ต้องกำหนดซ้ำ คุณสมบัติที่เกี่ยวกับข้อความ เช่น color, font-family และ line-height จะถูกสืบทอด ส่วนคุณสมบัติของโมเดลกล่อง เช่น margin จะไม่ถูกสืบทอด
body {
font-family: 'Inter', sans-serif; /* all text inherits this */
color: #1a202c; /* all text inherits this */
}ตัวเลือก :is() และ :where()
:is() และ :where() ช่วยให้เขียนตัวเลือกแบบกระชับเพื่อจับคู่กับรายการใดรายการหนึ่งในชุดได้ ความแตกต่างคือ :is() จะสืบทอดความจำเพาะเจาะจงสูงสุดจากอาร์กิวเมนต์ของตน ส่วน :where() จะมีความจำเพาะเจาะจงเป็นศูนย์เสมอ
/* Instead of h1 a, h2 a, h3 a: */
:is(h1, h2, h3) a {
color: inherit;
}ตัวเลือกสากล *
ตัวเลือกสากล * จะจับคู่องค์ประกอบทุกตัว โดยมักใช้ในชุดรีเซ็ต CSS เช่น *, *::before, *::after { box-sizing: border-box; } ซึ่งทำให้โมเดลกล่องคาดเดาได้ง่ายขึ้นมาก
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}สไตล์เริ่มต้นของเบราว์เซอร์
เบราว์เซอร์จะใช้สไตล์ชีตเริ่มต้นของตนเอง (หรือ สไตล์ชีตของตัวแทนผู้ใช้) ก่อนใช้สไตล์ชีตของคุณ ชุดรีเซ็ต CSS เช่น normalize.css หรือเลเยอร์ CSS จะทำให้ค่าเริ่มต้นเหล่านี้เป็นกลาง เพื่อให้การกำหนดสไตล์เริ่มจากพื้นฐานที่ทราบแน่ชัด
ตรวจสอบความเข้าใจ
ตัวเลือกใดมีความจำเพาะเจาะจงสูงสุด
สรุป: ตัวเลือกและการเรียงลำดับแบบแคสเคด
ระบุองค์ประกอบเป้าหมายด้วยตัวเลือกตามชนิด คลาส ID แอตทริบิวต์ และพิวโดคลาส ความจำเพาะเจาะจงใช้แก้ข้อขัดแย้ง (ID > คลาส > ชนิด) การเรียงลำดับแบบแคสเคดใช้ลำดับในแหล่งที่มาเป็นตัวตัดสินเมื่อค่าเท่ากัน การสืบทอดจะส่งต่อสไตล์ข้อความไปยังองค์ประกอบลูกหลานโดยอัตโนมัติ
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “ตัวเลือกและการเรียงซ้อน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวเลือกและการเรียงซ้อน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวเลือกและการเรียงซ้อน”
เลือกองค์ประกอบด้วยตัวเลือกชนิด คลาส ID และแอตทริบิวต์ ทำความเข้าใจความจำเพาะ การสืบทอด และการเรียงซ้อน เพื่อคาดการณ์ว่ารูปแบบใดมีผล คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวเลือกและการเรียงซ้อน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ตัวเลือกและการเรียงซ้อน
- สี ตัวอักษร และโมเดลกล่อง
- พื้นฐาน display: block inline flex grid
- การกำหนดตำแหน่ง: relative absolute fixed sticky