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

Program / 글쓴이

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

.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

답변