CSS เป็นหนึ่งในเครื่องมือที่ทรงพลังที่สุดสำหรับนักออกแบบเว็บไซต์ การใช้มันทำให้เราสามารถเปลี่ยนอินเทอร์เฟซของเว็บไซต์ได้ภายในไม่กี่นาทีโดยไม่ต้องเปลี่ยนแท็กหน้า แม้ว่าเราแต่ละคนจะตระหนักดีว่ามันมีประโยชน์ แต่ตัวเลือก CSS ยังห่างไกลจากศักยภาพของตนเอง และบางครั้งเรามักจะใช้คลาส, id, div, spans ฯลฯ ที่มากเกินไปและไร้ประโยชน์ HTML ของเรายุ่งมาก
วิธีที่ดีที่สุดในการหลีกเลี่ยงการปล่อยให้ "โรคระบาด" เหล่านี้แพร่กระจายในมาร์กอัปของคุณ และรักษาความสะอาดและความหมายคือการใช้ตัวเลือก CSS ที่ซับซ้อนมากขึ้น ซึ่งสามารถกำหนดเป้าหมายองค์ประกอบเฉพาะได้โดยไม่ต้องใช้คลาสหรือรหัสเพิ่มเติม และด้วยวิธีนี้ เราก็สามารถ สร้างโค้ดของเรา ได้เช่นกัน และสไตล์ที่ยืดหยุ่นมากขึ้น
ลำดับความสำคัญของ CSS
ก่อนที่จะเจาะลึกขอบเขตของตัวเลือก CSS ขั้นสูง สิ่งสำคัญคือต้องทำความเข้าใจว่าลำดับความสำคัญของ CSS ทำงานอย่างไร เพื่อที่เราจะได้รู้วิธีใช้ตัวเลือกของเราอย่างเหมาะสม และหลีกเลี่ยงการเสียเวลามากในการแก้ไขข้อบกพร่องบางอย่าง ตราบใดที่เราใส่ใจกับลำดับความสำคัญ เพื่อแก้ไขปัญหาถ้า
เมื่อเราเขียน CSS เราต้องระวังว่าตัวเลือกบางตัวจะสูงกว่าตัวเลือกอื่นๆ ในคาสเคด ตัวเลือกที่เราเขียนในตอนท้ายไม่จำเป็นต้องแทนที่สไตล์ที่เราเขียนไว้ก่อนหน้านี้ในองค์ประกอบเดียวกัน
ดังนั้นคุณ จะคำนวณลำดับความสำคัญของตัวเลือกที่กำหนด ได้อย่างไร? มันค่อนข้างง่ายหากคุณพิจารณาว่าลำดับความสำคัญจะแสดงเป็นตัวเลขสี่ตัวคั่นด้วยเครื่องหมายจุลภาค เช่น 1, 1, 1, 1 หรือ 0, 2, 0, 1
ตัวเลขตัวแรก (a) มักจะเป็น 0 เว้นแต่จะใช้แอตทริบิวต์ style บนแท็ก
ตัวเลขตัวที่สอง (b) คือผลรวมของจำนวนรหัสในตัวเลือกนี้
ตัวเลขตัวที่สาม (c) คือผลรวมของตัวเลือกคุณลักษณะและคลาสเทียมอื่นๆ ที่ใช้กับตัวเลือกนี้ ซึ่งรวมถึงคลาส (.example) และตัวเลือกแอตทริบิวต์ (เช่น li[id=red]);
ตัวเลขตัวที่สี่ (d) นับองค์ประกอบ (เช่น ตาราง, p, div ฯลฯ) และองค์ประกอบหลอก (เช่น: บรรทัดแรก ฯลฯ );
ตัวเลือกสากล (*) มีลำดับความสำคัญเป็น 0;
หากตัวเลือกสองตัวมีลำดับความสำคัญเท่ากัน ตัวเลือกที่อยู่หลังในสไตล์ชีตจะมีผล
ลองดูตัวอย่างบางส่วนเพื่อให้เข้าใจได้ง่ายขึ้น:
#แถบด้านข้าง h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:บรรทัดแรก — 0, 1, 0, 2
ในตัวอย่างด้านล่าง อันแรกจะใช้ได้เนื่องจากมีลำดับความสำคัญสูงกว่าอันที่สอง:
#sidebar p#first { สี: สีแดง } —
#sidebar p:บรรทัดแรก { สี: สีน้ำเงิน } —
อย่างน้อยที่สุดสิ่งสำคัญคือต้องมีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานของลำดับความสำคัญ แต่เครื่องมือบางอย่าง เช่น Firebug เมื่อเราตรวจสอบองค์ประกอบเฉพาะ จะแสดงรายการคู่ตัวเลือก CSS ทั้งหมดตามลำดับความสำคัญของตัวเลือก เพื่อแจ้งให้เราทราบว่าคู่ใดอยู่ในองค์ประกอบเฉพาะ มีประโยชน์สำหรับตัวเลือกให้ถูกต้อง
ทำให้ง่ายมากสำหรับคุณที่จะเห็นว่าตัวเลือกใดที่ทำงานบนองค์ประกอบ