การผสมผสาน
คุณไม่จำเป็นต้องทำซ้ำตัวเลือกหลายตัวด้วยแอตทริบิวต์เดียวกัน คุณเพียงแค่ต้องคั่นตัวเลือกด้วยเครื่องหมายจุลภาค (,)
ตัวอย่างเช่น คุณมีรหัสต่อไปนี้:
h2 { สี: แดง;
.thisOtherClass { สี: แดง;
.yetAnotherClass { สี: แดง;
จากนั้นคุณสามารถเขียน:
h2, .thisOtherClass, .yetAnotherClass { สี: สีแดง;
เมื่อใช้การจัดองค์ประกอบ คุณสามารถกำหนด CSS หลายรายการพร้อมกัน ซึ่งช่วยประหยัดไบต์และเวลาได้มาก
ซ้อนกัน
หาก CSS มีโครงสร้างที่ดี ก็ไม่จำเป็นต้องใช้คลาสหรือตัวเลือกตัวระบุมากเกินไป เนื่องจากคุณสามารถระบุตัวเลือกภายในตัวเลือกได้ (หรือดีกว่านั้นคือตัวเลือกบริบท - โดยนักแปล)
ตัวอย่างเช่น:
#top { สีพื้นหลัง: #ccc ช่องว่างภายใน: 1em }
#top h1 { สี: #ff0;
#top p { สี: สีแดง; ตัวอักษร-น้ำหนัก: ตัวหนา;
วิธีนี้จะกำจัดคลาสหรือตัวเลือกตัวระบุที่ไม่จำเป็นหากนำไปใช้กับ HTML เช่นนี้:
นี่คือสูตรของฉันในการทำแกงกะหรี่ด้วยช็อกโกแลตล้วนๆ
อืมมมมมมม
เนื่องจากการใช้ตัวเลือกคั่นช่องว่างครึ่งความกว้างภาษาอังกฤษ เราระบุว่า h1 ใน ID ID มีสี "#ff0" ในขณะที่ p เป็นสีแดงและตัวหนา
นอกจากนี้ยังอาจซับซ้อนเล็กน้อย (เนื่องจากอาจมีมากกว่าสองระดับ เช่น ภายใน ภายใน ภายใน เป็นต้น) คุณต้องฝึกฝนให้มากขึ้น
การใช้การซ้อนจะทำให้โค้ด CSS อ่านได้ชัดเจนยิ่งขึ้น และปรับแต่ง CSS สำหรับองค์ประกอบที่คุณระบุได้