พิชิตตัวเลือก CSS ขั้นสูง

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-09-07 21:27:44

บทความต้นฉบับ: Conquer Advanced CSS Selectors
แปลจาก:ฝึกฝนตัวเลือก CSS ขั้นสูง

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 { สี: สีแดง } — 0, 2, 0, 1
#sidebar p:first-line { สี: สีน้ำเงิน } — 0, 1, 0, 2

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

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

บทความที่เป็นประโยชน์: