ลักษณะเฉพาะ

พอดแคสต์ 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 */
}

ตรวจสอบความเข้าใจ

ทดสอบความรู้ด้านการให้คะแนนความเฉพาะเจาะจง

ความจำเพาะเจาะจงในบริบท

ระบบจะเพิ่มความจำเพาะของตัวเลือกแต่ละรายการที่ตรงกับองค์ประกอบหนึ่งเข้าด้วยกัน ลองดูตัวอย่าง 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;
}

ตรวจสอบความเข้าใจ

ทดสอบความรู้ด้านการให้คะแนนความเฉพาะเจาะจง

การสื่อให้เห็นถึงความเฉพาะเจาะจง

ในแผนภาพและเครื่องคำนวณความจำเพาะเจาะจง ความเฉพาะเจาะจงมักจะเห็นภาพดังนี้

กลุ่มทางซ้ายคือตัวเลือก id รายการ กลุ่มที่ 2 คือตัวเลือกคลาส แอตทริบิวต์ และคลาสจำลอง กลุ่มสุดท้ายคือตัวเลือกองค์ประกอบและองค์ประกอบสมมติ

สำหรับการอ้างอิง ตัวเลือกต่อไปนี้คือ 0-4-1

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการนำเสนอภาพที่เจาะจง

เพิ่มความเฉพาะเจาะจงในทางปฏิบัติ

สมมติว่าเรามี 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 ใหม่จะชนะ วิธีการคือต้องตรงกับความจำเพาะของตัวเลือกอื่นที่กำหนดเป้าหมายไปยังองค์ประกอบเดียวกัน

แหล่งข้อมูล

• ข้อกำหนดเฉพาะของ CSS
• เครื่องคำนวณที่เจาะจง
• ข้อมูลจำเพาะของ MDN
• ข้อมูลจำเพาะเกี่ยวกับความจำเพาะของ CSS
• เครื่องคำนวณที่เฉพาะเจาะจงอื่นๆ