CSS 클래스 구문에서 `.foo.bar`와 `.foo .bar`의 차이점은 무엇입니까?

CSS 클래스 구문: .foo.bar 대 .foo .bar

CSS에서 요소에 클래스를 추가하는 구문은 다양할 수 있으므로 의도한 내용에 대한 혼란이 발생할 수 있습니다. 용법. 이 질문은 다음 두 클래스 구문의 차이점을 다룹니다.

.element .symbol 대 .element.large .symbol

설명

1. .element .symbol: 이 구문은 .symbol 클래스가 이미 .element 클래스. 즉, .element 클래스를 갖는 요소의 자손인 요소를 선택합니다.
2. .element.large .symbol: 이 구문은 다릅니다. 여기서는 .large 클래스가 .element 클래스에 연결됩니다. 이는 .symbol 클래스가 .element 및 .large 클래스를 모두 갖는 요소에 적용된다는 의미입니다.

예

이 개념을 설명하려면 다음 HTML 및 CSS를 고려하세요.

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

이 예에서는 .element div 내부의 첫 번째 .symbol div에 색상이 지정됩니다. 빨간색이고 .element 큰 div 내의 두 번째 .symbol div는 빨간색과 굵은 글씨로 표시됩니다.

결론

두 클래스 구문의 차이점은 지정된 클래스 간의 관계에 있습니다. . .foo.bar는 bar 클래스가 있고 foo 클래스가 있는 요소의 자손인 요소를 선택하는 반면, .foo .bar는 foo 및 bar 클래스가 모두 있는 요소를 선택합니다.

위 내용은 CSS 클래스 구문에서 `.foo.bar`와 `.foo .bar`의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!