specificity CSS

ความเฉพาะทางคืออะไร?

ถ้ามีกฎ CSS ที่ชนกันที่มีทิศทางที่มุ่งหน้ายังองค์ประกอบเดียวกันสองแถวหรือมากกว่า โปรแกรมบราวเซอร์จะตามหลักบางประการเพื่อตัดสินว่ากฎใดเป็นเฉพาะทางที่สูงที่สุด และดังนั้นจึงชนะ

ดูความเฉพาะทาง (specificity) ว่าเป็นคะแนน/ระดับ ที่สามารถตัดสินว่าจะใช้การประกาศรูปแบบใดบนองค์ประกอบ

เลือกตัวแทนทั่วไป (* มีความเฉพาะทางต่ำ และเลือกตัวแทน ID มีความเฉพาะทางสูง!

แจ้งเตือน：ความเฉพาะทางนี้เป็นเหตุผลที่ทำให้กฎแบบ CSS ไม่ถูกใช้บนองค์ประกอบบางตัว แม้ว่าคุณอาจจะคิดว่าควรจะใช้ได้

ระดับความเฉพาะส์

ตัวเลือกทุกตัวในโซ่เลือกมีตำแหน่งในระดับความเฉพาะส์ของโซ่เลือก โดยสี่ประเภทต่อไปนี้นิยามระดับความเฉพาะส์ของโซ่เลือก:

style ฝังเข้าไปในองค์ประกอบ - style ฝังเข้าไปในองค์ประกอบหมายถึงการแฝงสไตล์ตรงไปยังองค์ประกอบที่ต้องการจะกำหนดสไตล์ ตัวอย่าง：<h1 style="color: #ffffff;">

ID - ID คือเครื่องหมายรับรู้สำหรับองค์ประกอบในหน้าเว็บ อย่างเช่น #navbar

class, attribute และ pseudo-classes - ประเภทนี้รวมถึง .classes, [attributes] และ pseudo-classes อย่างเช่น :hover, :focus และอื่น ๆ

องค์ประกอบและ pseudo-element - ประเภทนี้รวมถึงองค์ประกอบและ pseudo-element อย่างเช่น h1, div, :before และ :after

แบบคำนวณความเฉพาะส์?

โปรดจดจำวิธีการคำนวณความเฉพาะส์!

เริ่มต้นด้วย 0 และเพิ่ม 1000 สำหรับ style แบบฝังเข้าไปในองค์ประกอบ 100 สำหรับแบบ ID 10 สำหรับแบบ attribute หรือ class และ 1 สำหรับแบบองค์ประกอบหรือ pseudo-element

โปรดคิดจัดรหัสที่สามนี้ต่อไปนี้:

ตัวอย่าง

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • ความเฉพาะส์ของ A คือ 1 (องค์ประกอบ)
  • ความเฉพาะส์ของ B คือ 101 (ID และองค์ประกอบ)
  • ความเฉพาะส์ของ C คือ 1000 (style ฝังเข้าไปในองค์ประกอบ)

เพราะ 1 < 101 < 1000 ดังนั้นกฎที่ 3 (C) มีความเฉพาะส์สูงกว่า ดังนั้นจะถูกใช้งาน

กฎเฉพาะภาพ 1:

ในขณะที่มีความเฉพาะส์เหมือนกัน: - ถ้าเขียนกฎเดียวกันสองครั้งในไฟล์ CSS ภายนอก กฎที่เขียนขึ้นท้ายจะใกล้องกับองค์ประกอบที่ต้องการจะกำหนดสไตล์มากขึ้น ดังนั้นจะถูกใช้งาน:

ตัวอย่าง

h1 {background-color: yellow;}
h1 {background-color: red;}

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

กฎที่ขึ้นไปตามลำดับจะถูกใช้งานเสมอ

กฎเฉพาะภาพ 2:

โซ่เลือก ID มีความเฉพาะส์สูงกว่าโซ่เลือกรูปแบบ - โปรดดูรหัสที่สามนี้ต่อไปนี้:

ตัวอย่าง

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

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

กฎที่ 1 มีความเฉพาะส์มากกว่ากฎที่ 2 และ 3 ดังนั้นจะถูกใช้งาน

กฎเฉพาะภาพ 3:

โซ่เลือกประเภทที่มีความเฉพาะส์มากกว่าโซ่เลือกองค์ประกอบเดียว - โซ่สไตล์ที่ฝังเข้าไปในองค์ประกอบที่ต้องการจะกำหนดสไตล์ให้มากขึ้น ดังนั้นในขณะนี้นี้:

ตัวอย่าง

จากไฟล์ CSS ภายนอก：

#content h1 {background-color: red;}

ในแบบภาพ HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

จะนำไปใช้กฎต่อไป

กฎความเฉพาะ 4:

ตัวเลือกทั้งหมดที่เป็นคลาสจะเอาชนะจำนวนไม่จำกัดของตัวเลือกประกอบ - ตัวเลือกทั้งหมดที่เป็นคลาส (เช่น .intro จะเอาชนะ h1, p, div และอื่นๆ):

ตัวอย่าง

.intro {background-color: yellow;}
h1 {background-color: red;}

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

นอกจากนี้ตัวเลือกทั่วไปและค่าที่ถูกสืบทอดมีความเฉพาะ 0 - ความเฉพาะของ * หรือ body * และที่คล้ายกันมีความเฉพาะ 0 มีค่าที่ถูกสืบทอดมาก็คือ 0