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

แนวคิด CSS Specificity ไม่ได้เป็นเพียงการบิดลิ้นเล็กน้อย (พยายามพูดให้เร็ว 3 ครั้ง!) แต่อาจทำให้เสียสติได้เช่นกัน! เป็นหนึ่งในแนวคิดที่ยากกว่าใน CSS ที่จะเข้าใจ ในบทความนี้ เราจะพูดถึงความหมายของความเฉพาะเจาะจง วิธีคำนวณ และการจัดอันดับตัวเลือกเป็นตัวกำหนดรูปแบบที่แสดงบนหน้า ไม่ต้องกังวลใจ! คุณจะเป็นผู้เชี่ยวชาญด้านความจำเพาะในเวลาไม่นาน

'ความจำเพาะ' หมายถึงอะไร

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

ความเฉพาะเจาะจงแสดงด้วยตัวเลขสี่ตัว แต่ละตัวคั่นด้วยเครื่องหมายจุลภาค:

Selector specificity = 0, 0, 0, 0

เมื่อเราพิจารณาความจำเพาะเป็นสตริงของตัวเลขสี่ตัวโดยไม่มีเครื่องหมายจุลภาค (เช่น 0000, 0101, 1001 เป็นต้น) ค่าที่ สูงกว่า ตัวเลขคือ เจาะจงมากขึ้น มันคือ.

ความจำเพาะของผู้เลือกตามอันดับ (ต่ำ – สูง):

มาดูองค์ประกอบประเภทต่างๆ ตามอันดับกัน:

• ＊

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

• ＞, ➕, ‘ ‘ , ∼

เครื่องผสมซึ่งมักจะเห็นเมื่อเลือกพี่น้องของตัวเลือกประเภทหรือตัวเลือกคลาส จะไม่มีผลต่อความจำเพาะและไม่นับรวมในจำนวนทั้งหมด คลาสหลอกเชิงลบ (:not) ก็เข้ากับหมวดหมู่ความจำเพาะนี้ได้เช่นกัน

• div, form, ul, li เป็นต้น

นี่คือ ประเภท ตัวเลือก ตัวเลือกเหล่านี้เกือบจะรวมทุกอย่างที่อาจถือเป็นแท็กใน HTML ของคุณ น้ำหนักความจำเพาะคือ 0, 0, 0, 1 หากคุณมีตัวเลือกประเภทหลายตัวแยกจากกันโดยตัวผสม คุณจะต้องเพิ่มตัวเลือกเข้าด้วยกัน:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

div li {} ⇐ the specificity is 0,0,0,2

div li p {} ⇐ the specificity is 0,0,0,3

• .main-container, .navbar, [type=”text”], :hover

ลำดับถัดไปสำหรับความเฉพาะเจาะจงคือคลาส แอตทริบิวต์ และตัวเลือกคลาสหลอก

ตัวเลือกชั้นเรียนจะระบุด้วยจุด (“”) ที่จุดเริ่มต้น ตัวเลือกแอตทริบิวต์มีแอตทริบิวต์ภายในวงเล็บเหลี่ยมถัดจากตัวเลือกประเภท ตัวเลือกคลาสหลอกสงวนไว้สำหรับองค์ประกอบพิเศษที่ต้องการสไตล์ที่เฉพาะเจาะจงมากขึ้น มีความเฉพาะเจาะจงเท่ากับ 0, 0, 1, 0

div.navlink a {}

– ความจำเพาะคือ 0, 0, 1, 1 เพราะเรามีหนึ่งตัวเลือกคลาสและเรามีตัวเลือกหนึ่งประเภท

div.header li.list-item-disc button[type="submit"] {} 

– ความจำเพาะคือ 0, 0, 3, 3 เพราะเรามี 3 ตัวเลือกประเภทและ 2 ตัวเลือกคลาส + 1 ตัวเลือกแอตทริบิวต์ ถ้าเราถอดตัวเลือกแอตทริบิวต์ออก ความจำเพาะจะเป็น 0, 0, 2, 3 เนื่องจาก 23 น้อยกว่า 33 ตัวเลือก CSS ที่มีความจำเพาะ 0, 0, 3, 3 จะชนะเนื่องจากมีความจำเพาะสูงกว่า

• #สีน้ำเงิน #ซ่อนเร้น ฯลฯ

ตัวเลือก ID มีความเฉพาะเจาะจงสูงสุดในบรรดาตัวเลือก CSS:1, 0, 0, 0 เนื่องจากลักษณะเฉพาะของคำจำกัดความแอตทริบิวต์ ID เรามักจะกำหนดสไตล์องค์ประกอบที่เฉพาะเจาะจงจริงๆ เมื่อเราเรียก ID ใน CSS ของเรา

div#orange {}

– ความจำเพาะคือ 1, 0, 0, 1 เพราะเรามีตัวเลือกประเภทและตัวเลือก ID สไตล์ใดชนะตามกฎความเฉพาะเจาะจงของเราจากสิ่งต่อไปนี้

div#orange {
	background-color: orange;
}
div.square {
	background-color: green;
	width: 150px;
	height: 150px;
}

1. div แรกมีตัวเลือกประเภทและตัวเลือก ID ทำให้เป็นความจำเพาะโดยรวม 1, 0, 0, 1
2. Div ที่สองมีตัวเลือกประเภทและตัวเลือกคลาส ทำให้เป็นความจำเพาะโดยรวม 0, 0, 1, 1

เนื่องจาก 1001 มากกว่า 11 div แรกจะเป็นผู้ชนะ และสีพื้นหลังจะเป็นสีส้ม ตรงกันข้ามกับลักษณะการเรียงซ้อนของ CSS

• แบบอินไลน์

การจัดสไตล์อินไลน์เข้ากับสิ่งเหล่านี้ได้อย่างไร มันยิ่ง มากกว่า เฉพาะกว่าตัวเลือก ID รูปแบบอินไลน์จะมีผลเหนือกว่าทุกอย่างในไฟล์ CSS ของคุณ มีน้ำหนักสูงสุดในแง่ของความจำเพาะ

• !important กฎ

!important คีย์เวิร์ดสำคัญกว่าทุกสิ่ง เป็นกฎที่เจาะจงที่สุดและจะเขียนทับกฎก่อนหน้าใดๆ ที่กำหนดโดย CSS

แบบฝึกหัด

ในตัวแก้ไขโค้ดด้านล่าง ฉันสร้างหน้าคอนเทนเนอร์ตัวอย่างที่มีชื่อคลาสสุ่มและชื่อ ID ฉันต้องการให้คุณใช้เวลาสักครู่และฝึกฝนการใช้ทักษะ CSS ของคุณเพื่อเปลี่ยนองค์ประกอบเฉพาะเป็นสีอื่น ในขณะที่ div อื่น ๆ ทั้งหมดยังคงเป็นสีเดียวกัน คุณจะเขียนกฎเหล่านั้นใน CSS อย่างไร คุณจะใช้อะไรเพื่อให้ได้ความเฉพาะเจาะจงสูงสุดหากนั่นคือสิ่งที่คุณต้องการใช้เพื่อกำหนดเป้าหมายองค์ประกอบบางอย่าง

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>CSS Specificity</title>
       <style>
           body {
               width: 100%;
               max-width: 800px;
               margin: 0 auto;
           }
 
           main {
               width: 100%;
               height: 800px;
               display: flex;
               flex-wrap: wrap;
               flex-direction: column;
           }
 
           div {
               text-align: center;
           }
           *.square {
               /* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis?  */
               height: 150px;
               width: 150px;
               background-color: black;
               color: white;
               margin: 20px;
           }
 
           div.flex {
               /* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
          
               Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
          
               */
               display: flex;
               justify-content: center;
               align-items: center;
           }
           div#red {
               /* why does this one win out? What is the specificity of this div? */
               background-color: darkred;
           }
           #red {
               /* What would happen if we took the 'div' out of the previous selector? Which one wins?  */
               background-color: red;
           }
 
           main > div {
               font-size: 55px;
               font-weight: bold;
           }
 
           div#self-align {
               /*  What happens here?  */
               align-self: center;
           }
       </style>
   </head>
   <body>
       <main>
           <div id="self-align" class="square flex">1</div>
           <div class="square flex">2</div>
           <div class="square flex">3</div>
           <div class="square flex">4</div>
           <div class="square flex">5</div>
           <div id="red" class="square flex">6</div>
           <div class="square flex">7</div>
           <div class="square flex">8</div>
           <div class="square flex">9</div>
           <div class="square flex">10</div>
           <div class="square flex">11</div>
           <div class="square flex">12</div>
       </main>
   </body>
</html>

บทสรุป

ในบทความนี้ เราได้พูดถึง CSS Specificity – โดยเฉพาะอย่างยิ่งตัวเลือกใดที่มีความเฉพาะเจาะจงมากกว่าตัวอื่นๆ และวิธีที่เราหาหมายเลขเฉพาะที่แท้จริง อย่าท้อแท้หากไม่มาถึงคุณทันทีที่อ่านครั้งแรก นี่เป็นข้อมูลจำนวนมากที่จะแยกแยะ เก็บไว้ที่มันและคุณจะได้รับมันเร็วพอ!