ลักษณะเฉพาะ

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

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

ทดสอบความรู้เกี่ยวกับการให้คะแนนความจำเพาะ

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

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

สำหรับการอ้างอิง ตัวเลือกต่อไปนี้คือ 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;
}

ปุ่มมีพื้นหลังสีเทาเนื่องจากตัวเลือกทั้ง 2 รายการมีคะแนนความจำเพาะเท่ากัน (0-1-0)

หากคุณเปลี่ยนกฎตามลำดับแหล่งที่มา ปุ่มจะเป็นสีน้ำเงิน

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

แหล่งข้อมูล

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