คู่มือสำหรับผู้เริ่มต้นสำหรับความเฉพาะเจาะจงของ CSS

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

กฎความเฉพาะเจาะจงของ CSS อาจเป็นหนึ่งในแนวคิดที่สับสนที่สุดในการทำความเข้าใจ โดยเฉพาะอย่างยิ่งสำหรับผู้เริ่มต้น

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

ดังนั้นเรามาแยกย่อยความเฉพาะเจาะจงของ CSS และวิธีการใช้งานอย่างมีประสิทธิภาพ

ความเฉพาะเจาะจงใน CSS คืออะไร?

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

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

มันทำงานอย่างไร?

ความเฉพาะเจาะจงของ Selector สามารถแบ่งได้เป็นสี่ระดับดังต่อไปนี้:

1. สไตล์อินไลน์หรือ CSS
2. รหัส
3. คลาส คลาสหลอก และแอตทริบิวต์
4. องค์ประกอบหรือองค์ประกอบหลอก

สไตล์อินไลน์ หรือ CSS ซึ่ง CSS ใช้กับเอกสาร HTML โดยตรง จะมีลักษณะดังนี้ <p> สไตล์อินไลน์จะมีระดับความจำเพาะสูงสุดเสมอ

อันดับสองในลำดับนี้คือ ID เช่น #content ดังนั้นตัวเลือกใด ๆ ที่ใช้รหัสจะมีระดับความเฉพาะเจาะจงสูงสุดเป็นอันดับสอง

คลาส คลาสหลอก และ แอตทริบิวต์ เป็นอันดับสามในลำดับนี้ มีลักษณะดังนี้: .post , :hover และ [title] ตามลำดับ

องค์ประกอบและองค์ประกอบเทียมมีค่าน้อยที่สุด li และ :after เป็นตัวอย่างพื้นฐานขององค์ประกอบและองค์ประกอบหลอก

การคำนวณ

ค่าความจำเพาะสามารถคำนวณได้โดยใช้แนวทางต่อไปนี้:

• สไตล์อินไลน์หรือ css: 1,0,0,0
• รหัส: 0,1,0,0
• คลาสหรือคลาสหลอกและแอตทริบิวต์: 0,0,1,0
• องค์ประกอบและองค์ประกอบหลอก: 0,0,0,1
• ตัวเลือกสากล (*): 0

หากต้องการตรวจสอบระดับความจำเพาะของตัวเลือก คุณสามารถใช้เครื่องคำนวณความจำเพาะ

กฎพื้นฐานของความเฉพาะเจาะจงของ CSS

ตอนนี้คุณมีความคิดเกี่ยวกับการจัดระเบียบความเฉพาะเจาะจงแล้ว เรามาพูดถึงกฎทั่วไปและตัวอย่างกัน!

นี่คือ HTML พื้นฐานที่ฉันจะใช้ในตัวอย่างของฉัน ที่นี่ฉันมีรายการเล็ก ๆ ภายในคอนเทนเนอร์ที่มี #content

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

กฎข้อที่ 1

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

ใน CSS snippet ต่อไปนี้ ตัวเลือกทั้งสองมีความจำเพาะเท่ากัน ดังนั้นสี li จะเป็นสีเหลือง เนื่องจากวางไว้ด้านล่างบรรทัด

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

กฎข้อที่ 2

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

ในตัวอย่างต่อไปนี้ li ถูกกำหนดเป้าหมายโดยตัวเลือกที่แตกต่างกันสองตัว และทั้งสองตัวเลือกมีผลกับสีฟอนต์ ดังนั้นควรใช้กฎข้อใด

เช่นเดียวกับตัวอย่างก่อนหน้านี้ ในแนวคิดคำสั่ง CSS ควรใช้อันที่สอง (ดังนั้นสี li จะเป็นสีเขียว) แต่เนื่องจาก .list li มีค่าความจำเพาะสูงกว่า ul li สีจะยังคงเป็นสีแดง

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

กฎข้อที่ 3

เราเห็นคลาสมีค่ามากกว่าองค์ประกอบในระดับความเฉพาะเจาะจง ตอนนี้มาดูกันว่าเกิดอะไรขึ้นกับ ID

ในตัวอย่างต่อไปนี้ เรามีคลาสและ ID ที่กำหนดเป้าหมายองค์ประกอบเดียวกันและส่งผลต่อสีแบบอักษร คำถามเดิมอีกครั้ง: ควรใช้กฎข้อใด

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

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

กฎข้อที่ 4

!important จะแทนที่ตัวเลือกใด ๆ ของค่าเฉพาะใด ๆ แต่โปรดจำไว้ว่าไม่ควรใช้ !important มากเกินไป เพราะไม่ถือว่าเป็นแนวทางปฏิบัติที่ดีที่สุดของ CSS

หากคุณเป็นผู้เขียน CSS ของคุณและไม่ได้ลบล้างกฎที่มีอยู่ คุณแทบจะไม่ต้องใช้ !important เลย

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

สิ่งนี้จะเกิดขึ้นเป็นส่วนใหญ่ในขณะที่ทำงานใน WordPress ซึ่งคุณจะพบไฟล์ CSS จำนวนมากที่ปลั๊กอินและธีมต่างๆ เพิ่มไว้แล้ว

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

ในตัวอย่างต่อไปนี้ ฉันกำลังสร้างสถานการณ์ก่อนหน้าขึ้นใหม่ โดย li กำหนดเป้าหมายด้วยตัวเลือก CSS ที่แตกต่างกัน แต่คุณจะเห็นว่า !important ลบล้างกฎทั้งหมด และสีจะเป็นสีเหลือง

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important จะให้อำนาจแก่คุณในการบังคับใช้ CSS ของคุณเหนือระดับความเฉพาะใดๆ

คุณต้องใช้ความระมัดระวังขณะใช้ !important เนื่องจากคุณไม่สามารถลบล้างกฎนี้ได้ วิธีเดียวที่จะแทนที่ !important คือการใช้ !important อื่นในภายหลังใน CSS ดังนั้น CSS ของคุณจะดูยุ่งเหยิงได้ง่ายหากคุณไม่เข้าใจถึงพลังของมัน

ข้อยกเว้นบางประการ

องค์ประกอบและองค์ประกอบหลอกมีความเฉพาะเจาะจงน้อยที่สุด แต่มีข้อยกเว้นที่น่าสนใจ (และสับสนเล็กน้อย!) (สับสนเพราะดูเหมือนจะไม่ปฏิบัติตามกฎที่เราเพิ่งเห็น)

ในตัวอย่างนี้ คุณจะเห็น :first-child (pseudo-class) และ :first-line (pseudo-element) เราเพิ่งเรียนรู้ว่าคลาสหลอกจะมีความจำเพาะสูงกว่าองค์ประกอบหลอก ดังนั้นตามนั้น สีของบรรทัดแรกของย่อหน้าควรเป็นสีเขียว แต่จะเป็นสีชมพูแทน

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

คุณอาจคิดว่าการจัดลำดับจะเป็นปัญหาที่นี่ แต่ถึงแม้การสลับลำดับจะไม่เปลี่ยนผลลัพธ์ เครื่องคำนวณความจำเพาะแสดงภาพที่แตกต่างจากผลลัพธ์

นี่คือจุดที่ความเฉพาะเจาะจงทำให้เกิดความสับสนเล็กน้อย ฉันสามารถสันนิษฐานได้ว่าสาเหตุของผลลัพธ์นี้คือ :first-line ใกล้กับองค์ประกอบมากขึ้นและอาจถือเป็นรูปแบบอินไลน์ คุณสามารถตรวจสอบ jsfiddle สำหรับตัวอย่างอื่น

จะใช้ความเฉพาะเจาะจงอย่างไรให้มีประสิทธิภาพ?

หากคุณเข้าใจกฎเฉพาะของ CSS คุณจะสามารถใช้งานได้อย่างมีประสิทธิภาพและทำให้ CSS ของคุณใช้ซ้ำได้

สมมติว่าคุณต้องการใช้ .button เดียวกันแต่มีสีพื้นหลังต่างกัน คุณจึงตั้งค่าตัวเลือกเฉพาะ: .red-block .button

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

หาก .button ถูกรวมไว้ในคอนเทนเนอร์ .red-block สีพื้นหลังของปุ่มเริ่มต้นจะเปลี่ยนเป็นสีแดง

ความเฉพาะเจาะจงของ CSS มีประโยชน์มากเมื่อปรับแต่งธีม WordPress ซึ่งคุณพยายามแทนที่ CSS ของผู้เขียนธีมด้วยตัวคุณเอง

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

บางคนใช้ตัวเลือกพิเศษเฉพาะ ซึ่งไม่ใช่แนวปฏิบัติที่ดี เฉพาะเจาะจงเท่าที่จำเป็นเท่านั้น ตัวอย่างเช่น ข้อมูลโค้ดนี้กำหนดเป้าหมายไปที่ li แต่เจาะจงเกินไป

 [css] div#content ul.list li{ color: purple; } [/css]

หากคุณเจาะจง CSS มากเกินไป CSS จะเข้มงวดและนำกลับมาใช้ใหม่ได้ยากขึ้น คุณสามารถเขียน .list li แทน div#content ul.list li ซึ่งจะทำให้ CSS ของคุณสะอาดขึ้น

แหล่งข้อมูลเพิ่มเติม

• W3 org เกี่ยวกับความเฉพาะเจาะจง
• เครื่องคำนวณเฉพาะ CSS
• บั๊ก IE
• IE แฮ็ค

บทสรุป

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