CSS 선택기에서 쉼표는 무엇을 의미합니까?

Question

#A .B, 
#A .C { some styles } 

클래스 B에 스타일 정의가 없다는 것을 의미합니까?

Answer 1

동일한 정의를 모두 적용된다는 것을 의미한다.

쉼표는 해당 블록의 선언을 두 셀렉터 모두에 적용하는 반면 쉼표 다음의 줄 바꿈은 특별한 의미가 없음을 나타냅니다. 이는 스타일 시트의 가독성을 높이기 위해 사용 된 순수한 공백입니다.

Answer 2

그것은 모두 #A .B#A .C주와 같은 선언 블록 수단 일치 DOM 요소 -

Answer 3

이것이 selector grouping입니다.

A .B {some definitions} 
A .C {some definitions} 

Answer 4

#A .B, #A .C {some definitions} 

의 개별적으로 각각의 선택 분석해 보자 :

먼저, 쉼표 여러 선택기를 분리하는 데 사용됩니다 그것은 바로 가기에 대한 것 각 선택기 (예 : #A .B에 한 번, #A .C)에 대해 동일한 스타일 규칙을 작성하는 대신 선택기를 병합 할 수 있습니다. 즉, 스타일 정의는 #A .B 및 #A .C 규칙에 모두 적용됩니다. 대표

개별 선택자 사이의 간격 (이 경우, .B #A 사이 ) : 경우 당신은뿐만 아니라 궁금해

,의는 또한 # A .B 선택을 해부하자 자손 관계. #A은 조상이고 .B은 자손입니다. # 기호는 으로 요소 ID를 나타내는 데 사용됩니다. 기호는 요소의 클래스를 repesent하는 데 사용됩니다. 즉, 위의 선택기 정의는 B 인 요소가 모두 A 인 요소의 자손 (직접 필요한 것은 아님)을 찾는 데 사용됩니다. 또한 요소의 하위 클래스 인 클래스 B 또는 C 포함 된 모든 요소 : 큰 그림

쉼표 두 개의 선택기를 병합 사용되는 전체 선택기 정의 될 함께 설정 ID A.

참고 : ID 의 소자는 클래스 B 또는 C를 포함하는 경우는,이 ​​두 소자 사이의 자손 관계 (포함해야 같이 스타일 정의는, 그것에 적용되지 선택자 정의가 #AB 또는 #AC이어야합니다.

희망이 도움이됩니다.