Latest web development tutorials

CSS 셀렉터의 조합

CSS 셀렉터의 조합

주의 조합 선택기는 두 선택기 사이의 직접적인 관계를 설명한다.

CSS 선택기 간단한 선택기 다양한 조합의 조합을 포함한다.

CSS3에서는 네 개의 조합을 포함 :

  • (공백으로 구분) 하위 선택
  • 자식 요소 선택 (더 구분보다)
  • 인접 형제 선택자 (플러스 분리)
  • (대시로 구분) 일반 형제 선택

자손 선택기

하위 선택자는 모든 요소를 ​​가치있는 하위 요소와 일치합니다.

다음은 <div> 요소로 모든 <p> 요소를 선택 :

예

div p
{
background-color:yellow;
}

»시도

아이 선택기

하위 선택기와 비교 부 셀렉터 (어린이 선택기) 요소의 하위 요소로 요소를 선택할 수있다.

다음 예는 모든 직접 하위 요소에 <div> 요소를 선택한 <P>

예

div>p
{
background-color:yellow;
}

»시도

인접 형제 선택기

인접 형제 선택자 (인접 형제 선택) 바로 요소 다음에 다른 요소를 선택하고 모두 동일한 부모 요소가 있습니다.

당신이 요소 직후에 다른 요소를 선택해야하고, 모두 같은 부모 요소가있는 경우 인접 형제 선택자 (인접 형제 선택)를 사용할 수 있습니다.

다음은 <P> 요소 후 <div> 요소의 모든 첫 번째를 선택 :

예

div+p
{
background-color:yellow;
}

»시도

일반 인접 형제 선택자

일반 인접 형제 선택 지정된 형제의 모든 요소를 ​​선택합니다.

다음 예는 모든 인접한 형제 <P> 모든 <div> 요소를 선택 :

예

div~p
{
background-color:yellow;
}

»시도