การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ
คำนวณคะแนนความจำเพาะและคาดการณ์ว่ากฎใดจะมีผลเหนือกว่าในความขัดแย้งด้านรูปแบบใด ๆ
การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ความจำเพาะคืออะไร
ความจำเพาะจะกำหนดว่ากฎ CSS ใดมีผล เมื่อมีกฎหลายกฎกำหนดเป้าหมายไปยังองค์ประกอบและคุณสมบัติเดียวกัน โดยคำนวณเป็นคะแนน 4 ส่วน: (A, B, C, D) ซึ่ง A มีลำดับสูงสุด และ D มีลำดับต่ำสุด
องค์ประกอบของความจำเพาะ
คอลัมน์ทั้งสี่:
- A: สไตล์อินไลน์ (แอตทริบิวต์ style="") = 1,0,0,0
- B: ตัวเลือก ID (#id) = 0,1,0,0
- C: ตัวเลือกคลาส (.class), ตัวเลือกแอตทริบิวต์, คลาสเสมือน = 0,0,1,0
- D: ตัวเลือกชนิด (องค์ประกอบ), องค์ประกอบเสมือน = 0,0,0,1
ตัวอย่างความจำเพาะ
การคำนวณความจำเพาะ:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>ตัวเลือกสากลไม่มีความจำเพาะ
ตัวเลือกสากล * ตัวเชื่อม (+, >, ~, ช่องว่าง) และคลาสเสมือน :where() ล้วนมีส่วนต่อความจำเพาะเป็นศูนย์ (0,0,0,0)
สไตล์อินไลน์มีลำดับเหนือกว่า
สไตล์อินไลน์ (แอตทริบิวต์ style="") มีความจำเพาะสูงสุด (1,0,0,0) มีเพียง !important เท่านั้นที่สามารถแทนที่สไตล์เหล่านี้จากกฎในสไตล์ชีตได้
การเปรียบเทียบคะแนนความจำเพาะ
เปรียบเทียบจากซ้ายไปขวา คอลัมน์แรกที่คะแนนแตกต่างกันจะเป็นตัวตัดสินว่ากฎใดมีผล (0,1,0,0) มีลำดับเหนือกว่า (0,0,99,99) เพราะคอลัมน์ ID ชนะในทันที
:is() :not() และ :has() กับความจำเพาะ
:is(), :not() และ :has() จะใช้ค่าความจำเพาะของอาร์กิวเมนต์ที่มีความจำเพาะสูงสุด:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>ความจำเพาะของ nth-child
:nth-child(), :first-child, :hover และคลาสเสมือนอื่น ๆ ล้วนเพิ่มค่า (0,0,1,0) ซึ่งเป็นความจำเพาะระดับคลาส
ความจำเพาะขององค์ประกอบเสมือน
::before, ::after, ::first-line เป็นต้น จะเพิ่มค่า (0,0,0,1) ซึ่งเป็นความจำเพาะระดับองค์ประกอบ โดยอยู่ในคอลัมน์ D
ความจำเพาะไม่ใช่การสืบทอด
ความจำเพาะจะคำนวณแยกกันในแต่ละคุณสมบัติและแต่ละองค์ประกอบ กฎที่มีความจำเพาะสูงกว่าจะมีผลกับคุณสมบัติหนึ่ง ๆ แต่ค่าที่สืบทอดจากองค์ประกอบแม่ซึ่งมีความจำเพาะสูงจะไม่ชนะกฎโดยตรงที่มีความจำเพาะสูงกว่าบนองค์ประกอบลูก
เครื่องมือคำนวณความจำเพาะ
ใช้เครื่องมือออนไลน์ เช่น specificity.keegan.st หรือ DevTools เพื่อตรวจสอบความจำเพาะ ใน DevTools สไตล์ที่ถูกขีดฆ่าในแผงสไตล์บ่งชี้ว่ากฎที่มีความจำเพาะสูงกว่ามีผล
ตรวจสอบความเข้าใจ
ตัวเลือกใดมีความจำเพาะสูงกว่า: #sidebar .link หรือ .nav .nav-item .nav-link.active
สรุปทบทวน
คะแนนความจำเพาะคือ (A, B, C, D): สไตล์อินไลน์, ID, คลาส/แอตทริบิวต์/คลาสเสมือน และองค์ประกอบ/องค์ประกอบเสมือน เปรียบเทียบจากซ้ายไปขวา — คอลัมน์แรกที่แตกต่างกันจะเป็นตัวตัดสิน :where() จะมีส่วนเป็นศูนย์เสมอ ID หนึ่งตัวมีลำดับเหนือกว่าตัวเลือกคลาสจำนวนเท่าใดก็ได้ ใช้แผงสไตล์ใน DevTools เพื่อดูว่ากฎใดมีผลและเพราะเหตุใด
คำถามที่พบบ่อย
บทเรียน “การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ”
คำนวณคะแนนความจำเพาะและคาดการณ์ว่ากฎใดจะมีผลเหนือกว่าในความขัดแย้งด้านรูปแบบใด ๆ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การคำนวณความจำเพาะ: สไตล์อินไลน์ ID คลาส องค์ประกอบ
- คาสเคด: แหล่งที่มาและลำดับ
- !important: เมื่อใดและเหตุใดจึงไม่ควรใช้
- การสืบทอดและคุณสมบัติ all