CSS และการจัดกลุ่มที่ซ้อนกัน
การจัดกลุ่ม Selectors
มีหลายองค์ประกอบที่มีรูปแบบเดียวกันในสไตล์เป็น
H1
{
สี: สีเขียว;
}
H2
{
สี: สีเขียว;
}
P
{
สี: สีเขียว;
}
{
สี: สีเขียว;
}
H2
{
สี: สีเขียว;
}
P
{
สี: สีเขียว;
}
เพื่อลดรหัสที่คุณสามารถใช้ตัวเลือกแพ็คเก็ต
ตัวเลือกของใช้แต่ละจุลภาค
ในตัวอย่างต่อไปนี้เราจะใช้โค้ดข้างเตอร์จัดกลุ่ม:
เตอร์ที่ซ้อนกัน
มันอาจจะนำไปใช้กับรูปแบบการเลือกตัวเลือกการตกแต่งภายใน
ในตัวอย่างต่อไปนี้ชุดของสามรูปแบบ:
- ระบุรูปแบบสำหรับองค์ประกอบ P ทั้งหมด
- = "เครื่องหมาย" องค์ประกอบระบุรูปแบบสำหรับการเรียนทั้งหมด
- = "เครื่องหมาย" องค์ประกอบ P ภายในองค์ประกอบระบุรูปแบบสำหรับการเรียนทั้งหมด
ตัวอย่าง
P
{
สี: สีฟ้า;
text-align: ศูนย์;
}
.marked
{
สีพื้นหลัง: สีแดง;
}
.marked P
{
สี: สีขาว;
}
{
สี: สีฟ้า;
text-align: ศูนย์;
}
.marked
{
สีพื้นหลัง: สีแดง;
}
.marked P
{
สี: สีขาว;
}
ลอง»