พอดแคสต์ CSS - 003: ความจำเพาะ
สมมติว่าคุณกำลังทำงานกับ HTML และ CSS ต่อไปนี้
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
มีกฎ 2 ข้อที่แข่งขันกัน โดยเวอร์ชันหนึ่งจะทำให้ปุ่มเป็นสีแดง ส่วนอีกปุ่มจะเป็นสีน้ำเงิน กฎใดมีผลกับองค์ประกอบนี้ การทำความเข้าใจอัลกอริทึมของข้อกำหนด CSS เกี่ยวกับความจำเพาะ เป็นกุญแจสำคัญในการทำความเข้าใจวิธีที่ CSS ตัดสินใจเลือกระหว่างกฎที่แข่งขันกัน
ความจำเพาะเป็น 1 ใน 4 ขั้นที่แตกต่างกันของ Cascade ซึ่งได้อธิบายไว้ในโมดูลที่แล้วบนCascade
การให้คะแนนความจำเพาะ
กฎตัวเลือกแต่ละข้อจะมีการให้คะแนน คุณอาจมองว่าความจำเพาะเจาะจงเป็นคะแนนรวม และตัวเลือกแต่ละประเภทจะได้รับคะแนนตามคะแนนนั้นๆ ตัวเลือกที่มีคะแนนสูงสุดจะชนะ
เมื่อมีความเฉพาะเจาะจงในโปรเจ็กต์จริง การดำเนินการให้สมดุลคือการตรวจสอบว่ากฎ CSS ที่คุณคาดว่าจะนำไปใช้นั้น นำไปใช้ได้จริง และโดยทั่วไปจะต้องรักษาคะแนนให้ต่ำเพื่อป้องกันความซับซ้อน คะแนนควรสูงที่สุดเท่าที่จะเป็นไปได้ แทนที่จะมุ่งหวังให้ได้คะแนนสูงสุดที่เป็นไปได้ ในอนาคต อาจต้องใช้ CSS บางรายการที่มีความสำคัญมากจริงๆ หากคุณมุ่งหวังให้ได้คะแนนสูงสุด คุณจะต้องทำงานนั้นอย่างหนัก
การให้คะแนนตัวเลือกแต่ละประเภท
ตัวเลือกแต่ละประเภทจะได้รับคะแนน คุณเพิ่มจุดเหล่านี้ทั้งหมดขึ้นไปเพื่อคำนวณความเฉพาะเจาะจงโดยรวมของตัวเลือก
ตัวเลือกส่วนกลาง
ตัวเลือกสากล (*
)
ไม่มีความเฉพาะเจาะจงและได้รับ 0 คะแนน
ซึ่งหมายความว่ากฎใดๆ ที่มีคะแนนตั้งแต่ 1 คะแนนขึ้นไปจะลบล้างกฎนั้น
* {
color: red;
}
ตัวเลือกองค์ประกอบหรือองค์ประกอบจำลอง
ตัวเลือกองค์ประกอบ (ประเภท) หรือองค์ประกอบจำลอง จะได้รับคะแนนความจำเพาะ 1 จุด
ตัวเลือกประเภท
div {
color: red;
}
ตัวเลือกองค์ประกอบจำลอง
::selection {
color: red;
}
คลาส คลาส Pseudo หรือตัวเลือกแอตทริบิวต์
ตัวเลือกคลาส, คลาส Pseudo หรือแอตทริบิวต์จะได้รับความจำเพาะเจาะจง 10 จุด
ตัวเลือกชั้นเรียน
.my-class {
color: red;
}
ตัวเลือกคลาส Pseudo
:hover {
color: red;
}
ตัวเลือกแอตทริบิวต์
[href='#'] {
color: red;
}
ส่วนคลาสจำลองของ :not()
เองไม่ได้เพิ่มอะไรลงในการคำนวณความจำเพาะ
อย่างไรก็ตาม ตัวเลือกที่ส่งผ่านเป็นอาร์กิวเมนต์จะถูกเพิ่มลงในการคำนวณความจำเพาะ
div:not(.my-class) {
color: red;
}
ตัวอย่างนี้มีความจำเพาะ 11 คะแนน
เพราะมีตัวเลือกประเภท 1 ประเภท (div
) และอีก 1 คลาสภายใน :not()
ตัวเลือกรหัส
ตัวเลือกรหัส
จะได้รับความจำเพาะเจาะจง 100 คะแนน
ตราบใดที่คุณใช้ตัวเลือกรหัส (#myID
) ไม่ใช่ตัวเลือกแอตทริบิวต์ ([id="myID"]
)
#myID {
color: red;
}
แอตทริบิวต์ของสไตล์แบบอินไลน์
CSS ที่ใช้กับแอตทริบิวต์ style
ขององค์ประกอบ HTML โดยตรง
จะได้รับคะแนนความเฉพาะเจาะจง 1,000 คะแนน
ซึ่งหมายความว่าคุณต้องเขียนตัวเลือกที่เจาะจงมากๆ เพื่อลบล้าง CSS
<div style="color: red"></div>
กฎ !important
ข้อ
สุดท้าย !important
ที่ส่วนท้ายของค่า CSS จะได้คะแนนความจำเพาะเป็น 10,000 คะแนน
นี่คือความเฉพาะเจาะจงสูงสุดที่แต่ละรายการจะได้รับ
กฎ !important
จะใช้กับพร็อพเพอร์ตี้ CSS ดังนั้นทุกอย่างในกฎโดยรวม (ตัวเลือกและพร็อพเพอร์ตี้) จะไม่ได้รับคะแนนความจำเพาะเท่ากัน
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการให้คะแนนความจำเพาะ
คะแนนความจำเพาะของ a[href="#"]
อยู่ที่เท่าไร
a
มีค่า 1 คะแนน แต่ [href="#"]
มีค่า 10 คะแนนa
มีค่า 1 คะแนนและ [href="#"]
มีค่า 10 คะแนน ทำให้ได้คะแนนร��ม 11 คะแนนความจำเพาะในบริบท
ระบบจะเพิ่มความเฉพาะเจาะจงของตัวเลือกแต่ละรายการที่ตรงกับองค์ประกอบร่วมกัน ลองดูตัวอย่าง HTML นี้
<a class="my-class another-class" href="#">A link</a>
ลิงก์นี้มี 2 ชั้นเรียน เพิ่ม CSS ต่อไปนี้เพื่อรับความจำเพาะเจาะจง 1 จุด
a {
color: red;
}
ใช้อ้างอิงคลาสใดคลาสหนึ่งในกฎนี้ ตอนนี้มีจุดที่เจาะจง 11 จุด ดังนี้
a.my-class {
color: green;
}
เพิ่มคลาสอื่นไปยังตัวเลือก ตอนนี้มีความจำเพาะ 21 จุด:
a.my-class.another-class {
color: rebeccapurple;
}
เพิ่มแอตทริบิวต์ href
ลงในตัวเลือก
ตอนนี้มี 31 จุด
a.my-class.another-class[href] {
color: goldenrod;
}
สุดท้าย เพิ่มคลาสเทียม :hover
ลงในทั้งหมดนี้ ตัวเลือกจะมี 41 จุดของความเฉพาะเจาะจง
a.my-class.another-class[href]:hover {
color: lightgrey;
}
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการให้คะแนนความจำเพาะ
ตัวเลือกใดต่อไปนี้มี 21 คะแนน
article > section
article.card.dark
article:hover a[href]
การแสดงภาพความเฉพาะเจาะจง
ในแผนภาพและเครื่องคำนวณความจำ ค่าความจำเพาะมักแสดงให้เห็นแบบแผนต่อไปนี้
กลุ่มทางซ้ายคือตัวเลือก id
กลุ่มที่สองคือตัวเลือกคลาส แอตทริบิวต์ และคลาส Pseudo
กลุ่มสุดท้ายคือตัวเลือกองค์ประกอบและองค์ประกอบจำลอง
สำหรับการอ้างอิง ตัวเลือกต่อไปนี้คือ 0-4-1
a.my-class.another-class[href]:hover {
color: lightgrey;
}
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการแสดงภาพข้อมูลที่เฉพาะเจาะจง
ตัวเลือกใดต่อไปนี้คือ 1-2-1
section#specialty.dark
1-1-1
#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
1-3-0
li#specialty section.dark
1-1-2
เพิ่มความจำเพาะเจาะจง
สมมติว่าเรามี CSS บางส่วนที่มีลักษณะเช่นนี้
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
ใน HTML ซึ่งมีลักษณะดังนี้
<button class="my-button" onclick="alert('hello')">Click me</button>
ปุ่มดังกล่าวจะมีพื้นหลังสีเทา
เนื่องจากตัวเลือกที่ 2 จะได้รับความจำเพาะ 11 คะแนน (0-1-1
)
เนื่องจากมีตัวเลือกประเภท 1 ประเภท (button
)
ซึ่งก็คือ 1 จุดและตัวเลือกแอตทริบิวต์ ([onclick]
) ซึ่งก็คือ 10 คะแนน
ส่วนกฎ .my-button
ก่อนหน้านี้ จะได้รับ 10 คะแนน (0-1-0
)
เพราะมีตัวเลือกคลาส 1 รายการ
ถ้าต้องการเพิ่มพลังกฎนี้ ให้ทำตัวเลือกชั้นเรียนซ้ำดังนี้
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
ตอนนี้ปุ่มจะมีพื้นหลังเป็นสีฟ้า
เนื่องจากตัวเลือกใหม่จะได้รับคะแนนความจำเพาะคือ 20 คะแนน (0-2-0
)
คะแนนความจำเพาะเจาะจงที่ตรงกันจะช่วยให้อินสแตนซ์ใหม่ล่าสุดชนะ
ตอนนี้เราจะใช้ปุ่มตัวอย่างต่อไปและเปลี่ยน CSS เป็น
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
ปุ่มมีพื้นหลังสีเทาเนื่องจากตัวเลือกทั้ง 2 รายการมีคะแนนความจำเพาะเท่ากัน (0-1-0
)
หากคุณเปลี่ยนกฎตามลำดับแหล่งที่มา ปุ่มจะเป็นสีน้ำเงิน
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
นี่เป็นเพียงอินสแตนซ์เดียวที่ CSS ใหม่จะชนะ ซึ่งจะต้องตรงกับความเจาะจงของตัวเลือกอื่นที่กำหนดเป้าหมายองค์ประกอบเดียวกัน