ความ จำเพาะของ CSS
ความจำเพาะคืออะไร?
หากมีกฎ CSS สองกฎขึ้นไปที่ชี้ไปยังองค์ประกอบเดียวกัน ตัวเลือกที่มีค่าความจำเพาะสูงสุดจะ "ชนะ" และการประกาศรูปแบบจะนำไปใช้กับองค์ประกอบ HTML นั้น
คิดว่าความเฉพาะเจาะจงเป็นคะแนน/อันดับที่กำหนดว่าการประกาศรูปแบบใดจะถูกนำไปใช้กับองค์ประกอบในท้ายที่สุด
ดูตัวอย่างต่อไปนี้:
ตัวอย่าง 1
ในตัวอย่างนี้ เราได้ใช้องค์ประกอบ "p" เป็นตัวเลือก และระบุสีแดงสำหรับองค์ประกอบนี้ ข้อความจะเป็นสีแดง:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
ตอนนี้ดูตัวอย่างที่ 2:
ตัวอย่าง 2
ในตัวอย่างนี้ เราได้เพิ่มตัวเลือกคลาส (ชื่อ "test") และระบุสีเขียวสำหรับคลาสนี้ ข้อความจะเป็นสีเขียว (แม้ว่าเราได้ระบุสีแดงสำหรับตัวเลือกองค์ประกอบ "p" เนื่องจากตัวเลือกคลาสมีลำดับความสำคัญสูงกว่า:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
ตอนนี้ดูตัวอย่างที่ 3:
ตัวอย่างที่ 3
ในตัวอย่างนี้ เราได้เพิ่มตัวเลือกรหัส (ชื่อ "สาธิต") ข้อความจะเป็นสีน้ำเงิน เนื่องจากตัวเลือก id มีลำดับความสำคัญสูงกว่า:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
ตอนนี้ดูตัวอย่างที่ 4:
ตัวอย่างที่ 4
ในตัวอย่างนี้ เราได้เพิ่มรูปแบบอินไลน์สำหรับองค์ประกอบ "p" ข้อความจะเป็นสีชมพู เนื่องจากรูปแบบอินไลน์ได้รับความสำคัญสูงสุด:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
ลำดับชั้นความจำเพาะ
ตัวเลือก CSS ทุกตัวมีตำแหน่งในลำดับชั้นความจำเพาะ
มีสี่ประเภทที่กำหนดระดับความจำเพาะของตัวเลือก:
- สไตล์อินไลน์ - ตัวอย่าง: <h1 style="color: pink;">
- รหัส - ตัวอย่าง: #navbar
- คลาส คลาสหลอก ตัวเลือกแอตทริบิวต์ - ตัวอย่าง: .test, :hover, [href]
- องค์ประกอบและองค์ประกอบหลอก - ตัวอย่าง: h1, :before
วิธีการคำนวณความจำเพาะ?
จดจำวิธีการคำนวณความจำเพาะ!
เริ่มต้นที่ 0 เพิ่ม 100 สำหรับแต่ละค่า ID เพิ่ม 10 สำหรับแต่ละค่าคลาส (หรือ pseudo-class หรือตัวเลือกแอตทริบิวต์) เพิ่ม 1 สำหรับแต่ละตัวเลือกองค์ประกอบหรือองค์ประกอบหลอก
หมายเหตุ:สไตล์อินไลน์ได้รับค่าความจำเพาะ 1,000 และให้ความสำคัญสูงสุดเสมอ!
หมายเหตุ 2:มีข้อยกเว้นประการหนึ่งสำหรับกฎนี้: หากคุณใช้!important
กฎ กฎจะแทนที่สไตล์อินไลน์ด้วยซ้ำ!
ตารางด้านล่างแสดงตัวอย่างบางส่วนเกี่ยวกับวิธีการคำนวณค่าความจำเพาะ:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
ตัวเลือกที่มีค่าความจำเพาะสูงสุดจะชนะและมีผล!
พิจารณาส่วนย่อยของรหัสทั้งสามนี้:
ตัวอย่าง
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
ความจำเพาะของ A คือ 1 (ตัวเลือกหนึ่งองค์ประกอบ)
ความจำเพาะของ B คือ 101 (การอ้างอิง ID หนึ่งรายการ + ตัวเลือกองค์ประกอบหนึ่งรายการ)
ความจำเพาะของ C คือ 1,000 (การจัดรูปแบบอินไลน์)
เนื่องจากกฎข้อที่สาม (C) มีค่าความจำเพาะสูงสุด (1000) การประกาศรูปแบบนี้จะถูกนำมาใช้
ตัวอย่างกฎเฉพาะเพิ่มเติม
ความจำเพาะเท่ากัน: กฎล่าสุดชนะ - หากกฎเดียวกันถูกเขียนสองครั้งในสไตล์ชีตภายนอก กฎล่าสุดจะชนะ:
ตัวอย่าง
h1 {background-color: yellow;}
h1 {background-color: red;}
ตัวเลือก ID มีความเฉพาะเจาะจงสูงกว่าตัวเลือกแอตทริบิวต์ - ดูรหัสสามบรรทัดต่อไปนี้:
ตัวอย่าง
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
กฎข้อแรกมีความเฉพาะเจาะจงมากกว่าอีกสองกฎ ดังนั้นจะถูกนำมาใช้
ตัวเลือกตามบริบทมีความเฉพาะเจาะจงมากกว่าตัวเลือกองค์ประกอบเดียว -สไตล์ชีตแบบฝังอยู่ใกล้กับองค์ประกอบที่จะจัดรูปแบบมากขึ้น ดังนั้นในสถานการณ์ต่อไปนี้
ตัวอย่าง
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
กฎหลังจะถูกนำมาใช้
ตัวเลือกคลาสจะเอาชนะตัวเลือกองค์ประกอบจำนวนเท่าใดก็ได้ - ตัวเลือกคลาส เช่น .intro beats h1, p, div เป็นต้น:
ตัวอย่าง
.intro {background-color: yellow;}
h1 {background-color:
red;}
ตัวเลือกสากล (*) และค่าที่สืบทอดมามีความเฉพาะเจาะจงเป็น 0 - ตัวเลือกสากล (*) และค่าที่สืบทอดมาจะถูกละเว้น!