วิธีใช้ CSS สองคลาสกับองค์ประกอบเดียว

ฉันสามารถใช้ 2 คลาสกับ div หรือ span เดียวหรือองค์ประกอบ html ได้หรือไม่ ตัวอย่างเช่น:

<a class="c1" class="c2">aa</a>

ฉันลองแล้วและในกรณีของฉันใช้ c2 ไม่ได้ ฉันจะสมัครทั้งสองคลาสพร้อมกันได้อย่างไร?

1) ใช้หลายคลาสภายในแอตทริบิวต์คลาสคั่นด้วยช่องว่าง ( อ้างอิง ):

<a class="c1 c2">aa</a>

2) ในการกำหนดเป้าหมายองค์ประกอบที่มีคลาสที่ระบุทั้งหมดให้ใช้ตัวเลือก CSS นี้ ( ไม่มีช่องว่าง ) ( อ้างอิง ):

.c1.c2 {
}

รวมสตริงคลาสทั้งสองในค่าแอ็ตทริบิวต์คลาสเดียวโดยมีช่องว่างระหว่าง

<a class="c1 c2" > aa </a>

อย่างที่คนอื่น ๆ ชี้ให้เห็นคุณก็แค่เว้นวรรค

อย่างไรก็ตามการรู้ว่าตัวเลือกทำงานอย่างไรก็มีประโยชน์เช่นกัน

พิจารณา HTML ส่วนนี้ ...

<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>

การใช้.a { ... }เป็นตัวเลือกจะเป็นการเลือกตัวแรกและตัวที่สาม อย่างไรก็ตามหากคุณต้องการเลือกรายการที่มีทั้งสองaและbคุณสามารถใช้ตัวเลือก.a.b { ... }ได้ โปรดทราบว่าสิ่งนี้ใช้ไม่ได้กับ IE6 เพียงแค่เลือก.b(อันสุดท้าย)

<a class="c1 c2">aa</a>

สิ่งนี้ชัดเจนมากในการเพิ่มสองคลาสใน div เดียวก่อนอื่นคุณต้องสร้างคลาสแล้วรวมเข้าด้วยกัน กระบวนการนี้ใช้เพื่อทำการเปลี่ยนแปลงและลดจำนวนลง ของชั้นเรียน ผู้ที่สร้างเว็บไซต์ตั้งแต่เริ่มต้นส่วนใหญ่ใช้วิธีการประเภทนี้ พวกเขาสร้างคลาสสองคลาสแรกสำหรับสีและคลาสที่สองสำหรับการตั้งค่าความกว้างความสูงรูปแบบฟอนต์ ฯลฯ เมื่อเรารวมคลาสทั้งสองคลาสแรกและคลาสสองจะมีผลทั้งคู่

.color
{background-color:#21B286;}
.box
{
  width:"100%";
  height:"100px";
  font-size: 16px;
  text-align:center;
  line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}

<div class="box color">orderlist</div>

แยกพวกเขาด้วยช่องว่าง

<div class="c1 c2"></div>