พอดแคสต์ CSS - 003: Specific
สมมติว่าคุณกำลังทำงานกับ HTML และ CSS ต่อไปนี้
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
มีกฎที่ใช้แข่งขัน 2 ข้อ ปุ่มหนึ่งจะทำให้ปุ่มเป็นสีแดง และอีกปุ่มหนึ่งจะเป็นสีน้ำเงิน กฎใดจะมีผลกับองค์ประกอบนี้ การทำความเข้าใจอัลกอริทึมของข้อกำหนด CSS เกี่ยวกับความจำเพาะ เป็นกุญแจสำคัญในการทำความเข้าใจวิธีที่ CSS ตัดสินใจระหว่างกฎที่แข่งขันกัน
ความจำเพาะเป็น 1 ใน 4 ขั้นที่แตกต่างกันของน้ำตก ซึ่งกล่าวถึงในโมดูลที่แล้วในคาสเคด
การให้คะแนนความจำเพาะ
กฎตัวเลือกแต่ละข้อจะได้รับคะแนน คุณสามารถมองว่าความเฉพาะเจาะจงเป็นคะแนนรวม และตัวเลือกแต่ละประเภทจะได้รับคะแนนเพื่อให้ได้คะแนนนั้น ตัวเลือกที่มีคะแนนสูงสุดจะเป็นผู้ชนะ
ด้วยความจำเพาะในโปรเจ็กต์จริง การสร้างสมดุลคือการตรวจสอบว่ากฎ CSS ที่คุณคาดว่าจะนำไปใช้ นำไปใช้ แต่โดยทั่วไป จะรักษาคะแนนให้ต่ำเพื่อป้องกันความซับซ้อน คะแนนนั้นควรสูงเท่าที่เราต้องการ แทนที่จะมุ่งหวัง ให้ได้คะแนนสูงสุดเท่าที่จะเป็นไปได้ ในอนาคต อาจต้องมีการใช้ CSS ที่สำคัญมากกว่าอีกบางรายการ ถ้าได้คะแนนสูงสุด ก็คงทำงานยาก
การให้คะแนนตัวเลือกแต่ละประเภท
ตัวเลือกแต่ละประเภทจะได้รับคะแนน คุณเพิ่มจุดทั้งหมดนี้ขึ้นเพื่อคำนวณความเฉพาะเจาะจงโดยรวมของตัวเลือก
ตัวเลือกส่วนกลาง
ตัวเลือกสากล (*
)
ไม่มีข้อมูลที่เจาะจง และได้รับ 0 คะแนน
หมายความว่า กฎที่มี 1 จุดขึ้นไปจะลบล้าง
* {
color: red;
}
ตัวเลือกองค์ประกอบหรือองค์ประกอบเทียม
องค์ประกอบ (ประเภท) หรือ pseudo-element จะได้รับ ความจำเพาะ 1 จุด
ตัวเลือกประเภท
div {
color: red;
}
ตัวเลือกองค์ประกอบจำลอง
::selection {
color: red;
}
ตัวเลือกคลาส คลาสเทียม หรือแอตทริบิวต์
ชั้นเรียน pseudo-class หรือ ตัวเลือก attribute จะได้รับความเฉพาะเจาะจง 10 คะแนน
ตัวเลือกชั้นเรียน
.my-class {
color: red;
}
ตัวเลือกคลาสเทียม
:hover {
color: red;
}
ตัวเลือกแอตทริบิวต์
[href='#'] {
color: red;
}
:not()
คลาส Pseudo จะไม่เพิ่มข้อมูลใดๆ ให้กับการคำนวณความจำเพาะ
อย่างไรก็ตาม ตัวเลือกที่ส่งผ่านเข้ามาในรูปแบบของอาร์กิวเมนต์จะถูกเพิ่มลงในการคำนวณความจำเพาะ
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="#"]
ต้องมีคะแนนความจำเพาะเท่าใด
ความจำเพาะเจาะจงในบริบท
ระบบจะเพิ่มความจำเพาะของตัวเลือกแต่ละรายการที่ตรงกับองค์ประกอบหนึ่งเข้าด้วยกัน ลองดูตัวอย่าง 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:hover a[href]
article.card.dark
article > section
การสื่อให้เห็นถึงความเฉพาะเจาะจง
ในแผนภาพและเครื่องคำนวณความจำเพาะเจาะจง ความเฉพาะเจาะจงมักจะเห็นภาพดังนี้
กลุ่มทางซ้ายคือตัวเลือก id
รายการ
กลุ่มที่ 2 คือตัวเลือกคลาส แอตทริบิวต์ และคลาสจำลอง
กลุ่มสุดท้ายคือตัวเลือกองค์ประกอบและองค์ประกอบสมมติ
สำหรับการอ้างอิง ตัวเลือกต่อไปนี้คือ 0-4-1
a.my-class.another-class[href]:hover {
color: lightgrey;
}
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับการนำเสนอภาพที่เจาะจง
ตัวเลือกใดต่อไปนี้คือ 1-2-1
section#specialty.dark
li#specialty section.dark
#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
เพิ่มความเฉพาะเจาะจงในทางปฏิบัติ
สมมติว่าเรามี 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;
}
ปุ่มจะมีพื้นหลังสีเทา
เนื่องจากตัวเลือกทั้งคู่มีคะแนนความเฉพาะเจาะจงเหมือนกัน (0-1-0
)
หากคุณเปลี่ยนกฎตามลำดับแหล่งที่มา ปุ่มก็จะกลายเป็นสีน้ำเงิน
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
และนี่เป็นเพียงกรณีเดียวที่ CSS ใหม่จะชนะ วิธีการคือต้องตรงกับความจำเพาะของตัวเลือกอื่นที่กำหนดเป้าหมายไปยังองค์ประกอบเดียวกัน