CSS 선택기를 사용하여 여러 클래스가 있는 HTML 요소를 어떻게 선택할 수 있습니까?

CSS 선택기를 사용하여 여러 클래스가 있는 요소 타겟팅

HTML 및 CSS로 작업할 때 클래스 기반 요소를 선택해야 하는 상황이 발생할 수 있습니다. 특정 클래스의 값에 대해 일반적인 요구 사항 중 하나는 여러 클래스가 할당된 요소를 선택하는 것입니다.

질문:

다음 클래스가 포함된 세 개의 div가 주어졌습니다.

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

CSS를 사용하여 두 번째 요소("foo bar" 클래스 포함)만 선택하도록 CSS를 작성하는 방법은 무엇입니까? 선택기?

답변:

여러 클래스가 있는 요소를 선택하려면 사이에 공백 없이 클래스 선택기를 연결하기만 하면 됩니다. 이 예에서 CSS 코드는 다음과 같습니다.

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

이 선택기는 "foo" 및 "bar" 클래스가 모두 할당된 유일한 요소이므로 두 번째 div에 스타일을 적용합니다. .

추가 참고 사항:

Internet Explorer 6과 같은 이전 브라우저에서는 올바르게 해석되지 않을 수 있습니다. 연결된 클래스 선택자. IE6은 마지막 클래스 선택기만 읽고 나머지는 무시합니다. IE6과의 호환성을 보장하려면 연결된 클래스 선택기를 사용하지 말고 대신 다음과 같은 보다 구체적인 선택기를 사용해야 합니다.

div.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

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