2009-12-21 4 views
5

자손 선택자를 다소 이해하지만, 더 복잡한 예가 나에게 문제를 일으키고 있습니다. 예를 들어 요소 #conten t의자손 선택기의보다 복잡한 예제 이해

  • 후손
  • 또한 클래스 .alternative
  • 의 구성원 :

    #content .alternative p 
    

    이 규칙은 E는 요소 E의 후손 페이지 요소에 적용해야

또는 p 요소에 적용해야합니다 :

  • 요소 #content
  • 의 후손도 클래스 .alternative의 멤버?

다음 규칙은 어떻습니까?

두번째는 동일 .alternative 다만, 또한 소자 #content 의 후손 하위 클래스 요소 :

첫번째 질문 정보
#content .alternative .alternative1 p 

답변

6

선택기의 오른쪽 대부분의 구성 요소에 대한 추가 정보를 확인 this link 실제로 요소를 선택합니다 부분입니다. 공백은 자손 선택 자입니다. 공백이 없으면 선택기는 모두 하나의 요소에 적용됩니다. id 내용 요소에 포함 된 대체 클래스의 엘레멘트에 포함 된 엘레멘트. id 내용의 요소에 포함 된 대안의 엘레멘트에 포함 된 대체물 1의 엘레멘트에 포함 된 엘레멘트이다. id 내용의 요소에 포함 된 대체 클래스 1 및 대체 클래스의 요소.

+0

나를 도와 주셔서 감사합니다. – carewithl

7

는 : P한다 요소를 적용 여분의 깊이 수준으로

선택기

+4

또한. 대체는 #content의 자손이어야합니다. –

1

공간으로 구분 된 지정자의 각 섹션은 문서의 개별 노드를 나타냅니다. 그래서 첫 번째 것.

1

첫 번째 설명이 올바른 것입니다. 두 번째 해석은 다음과 같이 CSS에 기록 될 것입니다 다음 .alternative가 해당 버전의 p에 부착되어 있기 때문에

#content p.alternative 

,이 규정보다는 하위를 지정합니다.대신

#content p .alternative 

로 작성하는 경우 그것은 #content 요소의 후손이다 p 요소의 후손이다 클래스 .alternative의 요소를 의미 할 것입니다.