ความจำเพาะของ CSS

สารบัญ

ความจำเพาะคืออะไร?

หากมีกฎ CSS สองข้อขึ้นไปที่ชี้ไปเหมือนกัน องค์ประกอบ ตัวเลือกที่มีค่าความจำเพาะสูงสุดจะ "ชนะ" และของมัน การประกาศสไตล์จะถูกนำไปใช้กับองค์ประกอบ HTML นั้น

คิดว่าความเฉพาะเจาะจงเป็นคะแนน/อันดับที่กำหนดการประกาศรูปแบบใด จะถูกนำไปใช้กับองค์ประกอบในที่สุด

ดูตัวอย่างต่อไปนี้:

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

ในตัวอย่างนี้ เราได้ใช้องค์ประกอบ "p" เป็นตัวเลือกและระบุสีแดง สำหรับองค์ประกอบนี้ ข้อความจะเป็นสีแดง:

 <html>
<head>
  <style>
    p {color: red;} 
  
  </style>
</head>
<body>
<p>Hello World!</p>
  
</body>
  </html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;} 
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

ตอนนี้ ให้ดูตัวอย่างที่ 2:

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

ในตัวอย่างนี้ เราได้เพิ่มตัวเลือกชั้นเรียน (ชื่อ "ทดสอบ") และ ระบุสีเขียว สีสำหรับคลาสนี้ ตอนนี้ข้อความจะเป็นสีเขียว (แม้ว่าเราจะระบุไว้แล้วก็ตาม สีแดง สีสำหรับตัวเลือกองค์ประกอบ "p") นี่เป็นเพราะว่ามีตัวเลือกคลาสให้ ลำดับความสำคัญสูงกว่า:

 <html>
<head>
  <style>
    .test {color: green;}
  
    p {color: red;} 
  </style>
</head>
<body>
  
<p class="test">Hello World!</p>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

ตอนนี้ ดูตัวอย่างที่ 3:

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

ในตัวอย่างนี้ เราได้เพิ่มตัวเลือกรหัส (ชื่อ "สาธิต") ข้อความตอนนี้จะเป็น สีน้ำเงิน เนื่องจากตัวเลือกรหัสมีลำดับความสำคัญสูงกว่า:

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test">Hello 
  World!</p>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

ตอนนี้ ให้ดูตัวอย่างที่ 4:

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

ในตัวอย่างนี้ เราได้เพิ่มรูปแบบอินไลน์สำหรับองค์ประกอบ "p" ที่ ตอนนี้ข้อความจะเป็นสีชมพู เนื่องจากสไตล์อินไลน์ให้ความสำคัญสูงสุด:

 <html>
<head>
  <style>
    #demo {color: blue;}
    
  .test {color: green;} 
    p {color: red;} 
  
  </style>
</head>
<body>
<p id="demo" class="test" 
  style="color: pink;">Hello World!</p>
</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;} 
p {color: red;} 
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

ลำดับชั้นความจำเพาะ

ตัวเลือก CSS ทุกตัวมีตำแหน่งในลำดับชั้นที่เฉพาะเจาะจง

มีสี่ประเภทที่กำหนดระดับความจำเพาะของตัวเลือก:

1. รูปแบบอินไลน์ - ตัวอย่าง:

<h1 style="color: pink;">

2. รหัส - ตัวอย่าง:

#navbar

3. คลาส, คลาสหลอก, ตัวเลือกแอตทริบิวต์ - ตัวอย่าง:

.test, :hover, [href]

4. องค์ประกอบและองค์ประกอบหลอก - ตัวอย่าง:

h1, ::before

วิธีการคำนวณความจำเพาะ?

จดจำวิธีคำนวณความจำเพาะ!

เริ่มต้นที่ 0 เพิ่ม 100 สำหรับแต่ละค่า ID เพิ่ม 10 สำหรับแต่ละค่า ค่าคลาส (หรือ คลาสหลอกหรือตัวเลือกแอตทริบิวต์) เพิ่ม 1 สำหรับแต่ละตัวเลือกองค์ประกอบหรือองค์ประกอบหลอก

หมายเหตุ: รูปแบบอินไลน์ได้รับค่าความจำเพาะ 1,000 และเท่ากับ ให้ความสำคัญสูงสุดเสมอ!

หมายเหตุ 2: มีอย่างหนึ่ง ข้อยกเว้นสำหรับกฎนี้: หากคุณใช้ !important กฎนี้จะแทนที่สไตล์อินไลน์ด้วยซ้ำ!

ตารางด้านล่างแสดงตัวอย่างเกี่ยวกับวิธีการคำนวณค่าความจำเพาะ:

Selector	Specificity Value	Calculation
p	1	1
p.test	11	1 + 10
p#demo	101	1 + 100
<p style="color: pink;">	1000	1000
#demo	100	100
.test	10	10
p.test1.test2	21	1 + 10 + 10
#navbar p#demo	201	100 + 1 + 100
*	0	0 (the universal selector is ignored)

ตัวเลือกที่มีค่าความจำเพาะสูงสุดจะชนะและมีผล!

พิจารณาโค้ดทั้งสามส่วนนี้:

ตัวอย่าง

A: h1
B: h1#content
C: <h1 id="content" style="color: 
  pink;">Heading</h1>

ความจำเพาะของ A คือ 1 (ตัวเลือกองค์ประกอบหนึ่งตัว)
ความจำเพาะของ B คือ 101 (หนึ่งการอ้างอิง ID + หนึ่งตัวเลือกองค์ประกอบ)
ความจำเพาะของ C คือ 1,000 (สไตล์อินไลน์)

เนื่องจากกฎข้อที่สาม (C) มีค่าความจำเพาะสูงสุด (1,000) ลักษณะนี้ การประกาศจะถูกนำไปใช้

ตัวอย่างกฎความเฉพาะเจาะจงเพิ่มเติม

ความจำเพาะที่เท่าเทียมกัน: กฎล่าสุดชนะ - หากมีการเขียนกฎเดียวกันสองครั้งลงในสไตล์ชีตภายนอก กฎล่าสุดชนะ:

ตัวอย่าง

h1 {background-color: yellow;}
h1 {background-color: red;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1>This is heading 1</h1>

</body>
</html>

ตัวเลือกรหัสมีความจำเพาะสูงกว่าตัวเลือกแอตทริบิวต์ - ดูโค้ดสามบรรทัดต่อไปนี้:

ตัวอย่าง

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>

<div id="a">This is a div</div>

</body>
</html>

กฎข้อแรกมีความเฉพาะเจาะจงมากกว่าอีกสองข้อ และจะถูกนำมาใช้

ตัวเลือกตามบริบทมีความเฉพาะเจาะจงมากกว่าองค์ประกอบเดียว ตัวเลือก - สไตล์ชีตที่ฝังไว้จะอยู่ใกล้กับองค์ประกอบที่จะจัดสไตล์มากขึ้น ดังนั้นใน สถานการณ์ต่อไปนี้

ตัวอย่าง

From external CSS file:
#content h1 {background-color: red;}

In HTML file:
<style>
#content h1 {background-color: 
yellow;}
</style>

กฎข้อหลังจะถูกนำไปใช้

ตัวเลือกคลาสจะชนะตัวเลือกองค์ประกอบจำนวนเท่าใดก็ได้ - ตัวเลือกคลาส เช่น .intro ชนะ h1, p, div ฯลฯ:

ตัวอย่าง

 .intro {background-color: yellow;}
h1 {background-color: 
  red;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>

<h1 class="intro">This is a heading</h1>

</body>
</html>

ตัวเลือกสากล (*) และค่าที่สืบทอดมามีความเฉพาะเจาะจงเป็น 0 - ตัวเลือกสากล (*) และค่าที่สืบทอดมาจะถูกละเว้น!