มีวิธีการเลือกที่ใช้บ่อยที่สุดสี่วิธี
การเลือกกฎรหัส เช่น
การอ้างอิงเนื้อหา
button#button{}
#urlBar[type="text"] { }
div > p > span#demo{}
การเลือกกฎของคลาส เช่น
การอ้างอิงเนื้อหา
button.toolbarButton { }
.fancyText { }
menuitem > .menu-left[checked="true"] { }
การเลือกกฎแท็ก เช่น
การอ้างอิงเนื้อหา
td { }
div > p { }
input[ type= "checkbox"] { }
ตัวเลือกแบบเดียวกัน เช่น
เนื้อหาอ้างอิง
*
: หลัง
[hidden="true"]
ทั้งหมดจะเริ่มจับคู่จากขวาสุดไปจนถึงจุดสิ้นสุดของกฎทั้งหมดทางซ้ายสุด
มีปัญหาเกิดขึ้น ตัวอย่างเช่น กฎที่อยู่ทางขวาสุดสามารถกำหนดองค์ประกอบที่คุณต้องการเลือกได้แล้ว
การจับคู่กฎที่มากขึ้นจะทำให้ประสิทธิภาพการทำงานลดลง
ตัวอย่างเช่น div > p > span#demo{}
div > p > span ไม่สมเหตุสมผลเลย
การปรับปรุง:
รหัสไม่ซ้ำกัน ไม่จำเป็นต้องแนบกฎที่ซ้ำซ้อน นอกจากนี้ยังสามารถจับคู่ได้อย่างแม่นยำ
เนื้อหาอ้างอิง
button#button{} -> #button{}
#urlBar[type="text"] { } -> #urlBar{}
div > p > span#demo{} -> #demo{}
สิ่งต่อไปนี้ไม่ควรปรากฏขึ้น <a class="toolbarButton"></a>ดังนั้นจึงสามารถปรับให้เหมาะสมได้เช่นกัน
การอ้างถึงเนื้อหา
button.toolbarButton { } -> .toolbarButton{}
ใช้กฎมากเกินไป เป็นการดีกว่าที่จะกำหนดคลาสให้กับองค์ประกอบโดยตรง
ตัวอย่างเช่น: div > p > span > a{}
อาจให้ประสิทธิภาพพิเศษ เพียงแค่เขียนชั้นเรียนโดยตรง
สถานการณ์พิเศษต้องได้รับการดูแลเป็นพิเศษ
ตัวอย่างเช่น บางครั้งคุณต้องแน่ใจว่าโครงสร้างหน้าสะอาด วิธีนี้ใช้เพื่อตอบสนองความต้องการของการแก้ไขในภายหลัง ก็เป็นไปได้เช่นกัน ค้นหาทางออกที่ดีที่สุดอย่างสมดุล
ใช้การสืบทอด
#demo .left{text-align:left} ->#demo{text-align:left}
หมายเหตุ: XUL ใช้ในบทความต้นฉบับ สำหรับนักเรียนที่ยังไม่คุ้นเคยกับ XUL แท็กอาจดูเล็กน้อย แปลกแต่ก็เข้าใจได้ไม่ยาก