ฉันจะนำสไตล์ไปใช้กับหลายคลาสพร้อมกันได้อย่างไร


277

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

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

เนื่องจากทั้งสองคลาสกำลังทำสิ่งเดียวกันฉันควรจะรวมเข้าเป็นหนึ่งเดียว ฉันจะทำสิ่งนั้นได้อย่างไร

คำตอบ:


545
.abc, .xyz { margin-left: 20px; }

คือสิ่งที่คุณกำลังมองหา


6
+1, สิ่งที่ฉันกำลังมองหา จากนั้นคุณสามารถมีรายการที่สองแยกต่างหากสำหรับ. abc และ / หรือ. xyz สำหรับคุณสมบัติที่คุณไม่ต้องการใช้กับทั้ง. xyz {font-weight: bold;} จะรวมกันเพื่อให้. xyz เป็นตัวหนาและระยะห่าง - ถูกทิ้งไว้ 20px แต่ .abc เหลือเพียงขอบซ้าย
RyanfaeScotland

64

คุณสามารถมีประกาศ CSS หลายรายการสำหรับคุณสมบัติเดียวกันโดยแยกพวกเขาด้วยเครื่องหมายจุลภาค:

.abc, .xyz {
   margin-left: 20px;
}

1
แม้ว่าคำตอบที่เลือกนั้นถูกต้องสมบูรณ์เราไม่สามารถรับประกันได้ว่ามือใหม่จะเข้าใจในสิ่งที่มันกำลังทำอยู่ ฉันจะไปกับคนที่อธิบายเพิ่มเติม เนื่องจากมันเป็น "วิธีตกปลา" มากกว่า "ที่นี่คือปลา"
Olgun Kaya

15

อย่าทำซ้ำ CSS ของคุณ

 a.abc, a.xyz{
    margin-left:20px;
 }

หรือ

 a{
    margin-left:20px;
 }

2
ฉันคิดว่าabcมันมีความหมายเหมือนชื่อชั้นหนึ่ง .. และxyzอีกชื่อหนึ่ง ข้อเสนอแนะของคุณคือการใช้ชื่อคลาสทั่วไปสำหรับคุณสมบัติทั่วไปซึ่งไม่จำเป็นและสับสนทำให้เกิดคำถาม
Arete

3

หากคุณใช้ดังต่อไปนี้รหัสของคุณจะมีประสิทธิภาพมากกว่าที่คุณเขียน คุณควรเพิ่มคุณสมบัติอื่น

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

หรือ

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

หรือ

a {
margin-left:20px;
width: 100px;
height: 100px;
} 
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.