CSS Selector

를 사용하여 여러 클래스를 사용하여 요소를 대상으로하는 경우, 요소를 기준으로 요소를 선택 해야하는 상황이 발생할 수 있습니다. 특정 클래스의 값에. 하나의 일반적인 요구 사항은 여러 클래스가 할당 된 요소를 선택하는 것입니다.

질문 :

Hello Foo
Hello World
Hello Bar

hello foo

hello bar

CSS를 작성하여 CSS 선택기를 사용하여 두 번째 요소 ( "foo bar"클래스 포함) 만 선택하기 위해 CSS를 어떻게 선택할 수 있습니까?

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

여러 클래스가있는 요소를 선택하려면 클래스 선택기를 공간에 공간없이 체인합니다. 이 예에서 CSS 코드는 다음과 같습니다.

. foo.bar { / * foo 및 바 클래스가있는 요소의 스타일 */ }

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

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

Internet Explorer 6과 같은 구형 브라우저는 묶은 클래스 선택기를 올바르게 해석하지 않을 수 있습니다. IE6은 마지막 클래스 선택기 만 읽고 다른 클래스 선택기를 무시합니다. IE6과의 호환성을 보장하려면 Chained Class Selectors를 사용하지 않고

div.foo.bar {와 같은보다 구체적인 선택기를 사용해야합니다. / * foo 및 바 클래스가있는 요소의 스타일 */ }