CSS 선택기에서 공백은 무엇을 의미합니까?

CSS 선택기에서 공백은 무엇을 의미합니까? 즉 .classA.classB와 .classA .classB의 차이점은 무엇입니까?

---

이 두 선택 자의 차이점은 무엇입니까?

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

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

---

.classA.classB클래스 A와 B ( class="classA classB") 가 모두있는 요소를 나타냅니다 . 반면을 .classA .classB갖는 소자를 의미 class="classB"를 갖는 원소에서 유래 class="classA".

편집 : 참조 용 사양 : 속성 선택자 (섹션 5.8.3 클래스 선택자 참조)

---

이와 같은 스타일은 훨씬 더 일반적이며 "classA"클래스의 모든 유형의 요소 내에 중첩 된 "classB"클래스의 모든 유형의 요소를 대상으로합니다.

.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 요소에 여러 클래스가있는 경우 공백으로 구분됩니다.)

---

.classA.classB즉, 두 클래스 이름이있는 요소가 모두 선택되는 반면 안에 .classA .classB클래스 이름이있는 요소 만 선택 된다는 의미입니다 .classBclassA

---

공식적으로는 '하위 결합 자'로 알려져 있습니다.

MDN 또는 CSS 사양 에서 이에 대해 읽어보십시오.

참고 URL : https://stackoverflow.com/questions/1126338/what-does-a-space-mean-in-a-css-selector-ie-what-is-the-difference-between-c