การผสมผสาน

คุณไม่จำเป็นต้องทำซ้ำตัวเลือกหลายตัวด้วยแอตทริบิวต์เดียวกัน คุณเพียงแค่ต้องคั่นตัวเลือกด้วยเครื่องหมายจุลภาค (,)

ตัวอย่างเช่น คุณมีรหัสต่อไปนี้:

h2 { สี: แดง;

.thisOtherClass { สี: แดง;

.yetAnotherClass { สี: แดง;

จากนั้นคุณสามารถเขียน:

h2, .thisOtherClass, .yetAnotherClass { สี: สีแดง;

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

ซ้อนกัน

หาก CSS มีโครงสร้างที่ดี ก็ไม่จำเป็นต้องใช้คลาสหรือตัวเลือกตัวระบุมากเกินไป เนื่องจากคุณสามารถระบุตัวเลือกภายในตัวเลือกได้ (หรือดีกว่านั้นคือตัวเลือกบริบท - โดยนักแปล)

ตัวอย่างเช่น:

#top { สีพื้นหลัง: #ccc ช่องว่างภายใน: 1em }

#top h1 { สี: #ff0;

#top p { สี: สีแดง; ตัวอักษร-น้ำหนัก: ตัวหนา;

วิธีนี้จะกำจัดคลาสหรือตัวเลือกตัวระบุที่ไม่จำเป็นหากนำไปใช้กับ HTML เช่นนี้:

เนื่องจากการใช้ตัวเลือกคั่นช่องว่างครึ่งความกว้างภาษาอังกฤษ เราระบุว่า h1 ใน ID ID มีสี "#ff0" ในขณะที่ p เป็นสีแดงและตัวหนา

นอกจากนี้ยังอาจซับซ้อนเล็กน้อย (เนื่องจากอาจมีมากกว่าสองระดับ เช่น ภายใน ภายใน ภายใน เป็นต้น) คุณต้องฝึกฝนให้มากขึ้น

การใช้การซ้อนจะทำให้โค้ด CSS อ่านได้ชัดเจนยิ่งขึ้น และปรับแต่ง CSS สำหรับองค์ประกอบที่คุณระบุได้