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