” 요소를 선택한 다음 자식 요소를 잡고 부모 요소의 스타일을 조정할 수 있습니다. 이를 위해 ' :가지다() ” 선택기.

두 개의 '

' 요소에서 '

' 요소가 포함된 요소를 선택합니다. .class-name:has(자녀 이름) ”:

.parent-div : 가지다 ( h1 ) {

배경색 : #103e6d ;

색깔 : 조개 ;

너비 : 150픽셀 ;

키 : 150픽셀 ;

경계 반경 : 오십% ;

텍스트 정렬 : 센터 ;

}

여기에서는 상위 요소에 다음 CSS 속성을 적용했습니다.

---

---

• “ 배경색 ” 요소의 배경색을 지정하는 데 사용됩니다.
• “ 색깔 ”는 요소 텍스트 색상을 지정합니다.
• “ 너비 ”는 요소 너비를 정의하는 데 사용됩니다.
• “ 키 ” 요소의 높이를 지정합니다.
• “ 경계 반경 ” 속성은 요소의 둥근 모서리를 설정하는 데 사용됩니다.
• “ 텍스트 정렬 ”는 텍스트 정렬을 지정합니다.

산출

모든 하위 요소를 선택하는 방법은 무엇입니까?

부모 선택자의 도움으로 자식 요소를 선택하려면 주어진 예제를 살펴보십시오.

예

다음 단계를 구현하여 HTML 페이지를 만듭니다.

• 두 개의 '를 포함하는 div 요소를 추가합니다.

  ” 태그 및 “ <사업부> ” 클래스가 있는 태그 자식 사업부 '.

• 아이 ' 사업부 ” 요소는 “

  ” 요소를 포함합니다:

< 사업부 수업 = '부모 사업부' >

< 피 > 여보세요 < / 피 >

< 피 > 세계 < / 피 >

< 사업부 수업 = '자식 사업부' >

< 피 > 나는 자식 div입니다 < / 피 >

< / 사업부 >

< / 사업부 >

부모 '를 통해 자식 요소를 선택할 수 있습니다. <사업부> ' 수업. 이렇게 하면 직접 ' 피 ” 요소뿐만 아니라 중첩된 “ 피 ” 요소:

.parent-div 피 {

배경색 : #7F167F ;

글꼴 모음 : 필기체 ;

글꼴 크기 : 25픽셀 ;

텍스트 정렬 : 센터 ;

색깔 : 흰 연기 ;

}

산출

모든 직접 하위 요소를 선택하는 방법은 무엇입니까?

부모 div의 직계 자식을 선택하려면 ' > ” 기호. 이렇게 하면 부모 '의 직계 자식인 모든 'p' 요소를 선택하는 데 도움이 됩니다. <사업부> '. 예를 들어 다음 CSS 속성을 적용했습니다.

.parent-div > 피 {

배경색 : #7F167F ;

글꼴 모음 : 필기체 ;

글꼴 크기 : 30픽셀 ;

텍스트 정렬 : 센터 ;

색깔 : 흰 연기 ;

}

“ 글꼴 모음 ”는 선택한 요소의 글꼴을 지정하고 “ 글꼴 크기 ”는 글꼴 크기를 정의하는 데 사용됩니다.

산출

우리는 HTML과 CSS의 CSS 상위 선택자에 대해 논의했습니다.

결론

CSS에서 ' :가지다() ” 선택자는 상위 선택자 의사 클래스로 활용됩니다. 특히 상위 요소를 선택하는 데 사용됩니다. 예를 들어, ' .parent-div:has(h1) '는 '가 있는 상위 요소를 선택합니다.

” 요소. 부모 요소의 자식 요소를 선택하려면 “ .parent-div p '. 조건문을 사용하여 모든 직계 하위 요소를 선택할 수도 있습니다. 이 기사에서는 CSS 상위 선택자를 예제와 함께 설명했습니다.