CSS 선택기를 사용하여 여러 클래스가 있는 요소를 어떻게 대상으로 지정할 수 있습니까?

여러 클래스가 있는 요소에 대한 CSS 선택기

CSS에서 특정 클래스 조합이 있는 요소를 대상으로 지정하는 방법을 결정하는 것은 웹 개발의 일반적인 요구 사항일 수 있습니다. . 세 개의 div 요소에 서로 다른 클래스 조합이 있는 다음 시나리오를 생각해 보세요.

<br><div><div class="foo bar">Hello World</div><br>&lt ;div>

작업은 foo를 모두 포함하는 두 번째 요소를 선택하는 것입니다. 및 bar 클래스.

해결책: 연결된 클래스 선택기

이를 달성하기 위해 CSS 선택기는 클래스 선택기 연결이라는 간단한 솔루션을 제공합니다. 다음 코드와 같이 클래스 이름을 공백 없이 함께 작성하면 됩니다.

.foo.bar {
  /* Styles for elements with both foo and bar classes */
}

이 선택기는 제공된 HTML의 두 번째 div 요소에만 적용됩니다. 두 클래스가 모두 있는 유일한 요소이기 때문입니다. .

Internet Explorer 6 주의사항

단, Internet Explorer 6 주의사항 6에는 연결된 클래스 선택기와 관련하여 주의할 점이 있습니다. 체인의 마지막 클래스 선택자만 인식하고 이전 클래스 선택자는 무시합니다. 위의 예에서 IE6은 foo 클래스가 있는 요소가 아닌 bar 클래스가 있는 요소에만 스타일을 적용합니다.

예

다음을 고려하세요. snippet:

*{
  color:black;
}

.foo.bar {
  color:red;
}

<div>

이 시나리오에서 IE6가 아닌 브라우저는 두 번째 브라우저에 빨간색을 적용합니다. div, IE6은 bar 클래스만 고려하므로 이를 세 번째 div에 적용합니다. 이전 브라우저 지원이 요구사항인 경우 이 동작을 알아두는 것이 특히 중요할 수 있습니다.

위 내용은 CSS 선택기를 사용하여 여러 클래스가 있는 요소를 어떻게 대상으로 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!