Space หมายถึงอะไรในตัวเลือก CSS เช่น. classA.classB และ. classA .classB แตกต่างกันอย่างไร

Question 1

ตัวเลือกทั้งสองนี้แตกต่างกันอย่างไร

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

Question 2

.classA.classBหมายถึงองค์ประกอบที่มีทั้งคลาส A และ B ( class="classA classB"); ขณะที่.classA .classBหมายถึงองค์ประกอบที่มีเชื้อสายมาจากองค์ประกอบที่มีclass="classB"class="classA"

แก้ไข: ข้อมูลจำเพาะสำหรับการอ้างอิง: Attribute Selectors (ดูหัวข้อ 5.8.3 Class Selectors)

Question 3

รูปแบบเช่นนี้พบได้บ่อยกว่ามากและจะกำหนดเป้าหมายองค์ประกอบประเภทใด ๆ ของคลาส "classB" ที่ซ้อนอยู่ภายในองค์ประกอบประเภทใดก็ได้ของคลาส "classA"

.classA .classB {
  border: 1px solid; }

มันจะใช้งานได้ตัวอย่างเช่นเมื่อ:

<div class="classA">
  <p class="classB">asdf</p>
</div>

อย่างไรก็ตามอันนี้กำหนดเป้าหมายองค์ประกอบทุกประเภทที่มีทั้งคลาส "classA" และคลาส "classB" รูปแบบนี้พบเห็นได้น้อย แต่ก็ยังมีประโยชน์ในบางสถานการณ์

.classA.classB {
  border: 1px solid; }

สิ่งนี้จะใช้กับตัวอย่างนี้:

<p class="classA classB">asdf</p>

อย่างไรก็ตามจะไม่มีผลต่อสิ่งต่อไปนี้:

<p class="classA">fail</p>
<p class="classB">fail</p>

(โปรดทราบว่าเมื่อองค์ประกอบ HTML มีหลายคลาสพวกเขาจะถูกคั่นด้วยช่องว่าง)

Question 4

.classA.classBหมายความว่าองค์ประกอบที่มีชื่อคลาสทั้งสองจะถูกเลือกในขณะ.classA .classBที่องค์ประกอบที่มีชื่อคลาสclassBภายในclassAจะถูกเลือกเท่านั้น