CSS Specificity

Specificity คือ ความจำเพาะ ใช้ในการตัดสินใจในกรณที่มีการกำหนดคุณสมบัติที่ขัดแย้งกันของ element โดยลำดับชั้นของความจำเพาะถูกแบ่งออกเป็น 4 ระดับดังนี้

  1. Inline Style (กำหนดรูปแบบให้กับ element โดยตรงเช่น <p style=”color:red;”>Tag P</p>)
  2. Id (ระบุ element ที่ไม่ซ้ำกันเช่น #p01)
  3. Classes, attributes and pseudo-classes (หมวดหมู่นี้ประกอบด้วย. class, [attributes] และ pseudo-class เช่น: hover,: focus เป็นต้น)
  4. Elements and pseudo-elements (หมวดหมู่นี้ประกอบด้วยชื่อองค์ประกอบและองค์ประกอบหลอกเช่น h1, div,: before and: after)

 

1.การหาค่าความจำเพาะ

ค่าความจำเพาะจะเริ่มต้นจาก 0 และจะเพิ่มมากน้อยดังต่อไปนี้

  • Style Attribute เพิ่ม 1000 ตัวอย่างเช่น <p style=”color:red;”>Hello world</p>
  • ID เพิ่มทีละ 100
  • แต่ละ Attribute หรือคลาสเพิ่มทีละ 10
  • ชื่อ element เพิ่มทีละ 1 

 

ตัวอย่างที่ 1.1 การเปรียบเทียบค่าความจำเพาะ

  • A : p
  • B : #p01 p
  • C : <div id=”p01″><p style=”color:red;”>content</p></div>

จากตัวอย่างสามารถคำนวณได้ดังนี้

A = 1

B = 100+1

C = 1000

ผลลัพธ์ 1 < 101 < 1000 

เนื่องจาก C มีค่ามากที่สุด ดังนั้น C จึงเป็นผู้ชนะ และแสดงผลตามค่าของ C

 

2.กฎความจำเพาะ

ในกรณีที่มี selector element ตัวเดียว มากกว่า 1 ตัว (กฎเดียวกันมากกว่า 1) จะใช้งาน selector ล่าสุดเสมอ (กฎล่าสุด) ดังตัวอย่างต่อไปนี้

ตัวอย่างที่ 2.1 

p{
  color:red;
}
p{
  color:green;
}
p{
  color:blue;
}

จากตัวอย่างที่ 2.1 selector ล่าสุด ได้มีการกำหนดคุณสมบัติสีของตัวหนังสือเป็น สีน้ำเงิน

 

ในกรณีที่มี selector element ตัวเดียว มากกว่า 1 ตัว (กฎเดียวกันมากกว่า 1) จากทั้ง CSS ในไฟล์ปัจจุบัน (Internal CSS) และจากไฟล์ภายนอก (External CSS) ซึ่งผลก็คือกฎที่ของ Internal CSS จะถูกนำไปใช้งาน ดังตัวอย่างที่ 2.2

ตัวอย่างที่ 2.2

<!DOCTYPE html>
<html>
  <head>
    <!-- css จากไฟล์ภายนอก 
    #content h1 {background-color: red;} 
    -->

    <!-- css ภายในไฟล์ -->
    <style>
      #content h1 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>

    <div id="content"><h1>External and Internal CSS</h1></div>

  </body>
</html>

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: