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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

การคำนวณ

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

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

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

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

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

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

<div id="content">

<ul class="list">

<li>Item 1<li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</div>

กฎข้อที่ 1

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

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

ul li{

color: green;

}

ul li{

color: yellow;

}

กฎข้อ 2

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

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

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

.list li{

color: red;

}

ul li{

color: green;

}

กฎข้อ 3

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

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

#content li{

color: blue;

}

.list li{

color: red;

}

ดังที่กล่าวไว้ก่อนหน้านี้ 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 จะแทนที่กฎทั้งหมด และสีจะเป็นสีเหลือง

#content li{

color: blue;

}

.list li{

color: red;

}

ul li{

color: green;

}

ul li{

color: yellow !important;

}

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

วิธีใช้เบรกพอยต์ CSS เพื่อสร้างการออกแบบที่ตอบสนอง

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

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

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

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

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

p:first-child{

color: green;

}

p::first-line{

color

:pink

;

}

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

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

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

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

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

.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;

}

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

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

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

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

div#content ul.list li{

color: purple;

}

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

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

• องค์กร W3 เกี่ยวกับความจำเพาะ
• เครื่องคำนวณความจำเพาะของ CSS
• IE Bug
• IE Hack

บทสรุป

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

กำลังมองหาบทช่วยสอน CSS อื่นอยู่ใช่ไหม ลองอย่างใดอย่างหนึ่งเหล่านี้!

• วิธีสร้างเลย์เอาต์อย่างง่ายด้วย CSS Grid Layout
• วิธีใช้เทคนิคการตัดและปิดบัง CSS และ SVG
• วิธีสร้างแอนิเมชั่น SVG ด้วย CSS
• วิธีสร้างการออกแบบ 3 มิติด้วยคุณสมบัติการแปลง CSS3