관계형 선택자는 요소 간의 관계를 선택하는 데 사용됩니다. 다음은 몇 가지 일반적인 관계형 선택자입니다.
- 하위 선택자: 하위 관계를 통해 요소를 선택합니다.
div p {
color: blue;
}로그인 후 복사
위의 예에서는
요소 내에 있는 모든
요소가 선택되며 텍스트 색상은 파란색으로 설정됩니다.
- 하위 선택기: 상위-하위 관계를 통해 요소를 선택합니다.
div > p {
font-weight: bold;
}로그인 후 복사
위의 예에서는
요소 내부의 모든
요소가 선택되고 글꼴이 굵게 표시됩니다.
- 인접 형제 선택기: 인접한 형제 관계를 기반으로 요소를 선택합니다.
h1 + p {
color: red;
}로그인 후 복사
위의 예에서는
요소 바로 뒤에 있는
요소가 선택되고 텍스트 색상이 빨간색으로 설정됩니다.
- 일반 형제 선택기: 형제 관계를 기준으로 요소를 선택합니다.
h1 ~ p {
font-style: italic;
}로그인 후 복사
위의 예에서는
요소 뒤에 있는 모든
요소가 선택되고 글꼴 스타일이 기울임꼴로 설정됩니다.
이러한 관계형 선택기를 사용하면 요소를 더 정확하게 선택하고 요소 간의 특정 관계를 기반으로 스타일을 적용할 수 있습니다. 관계형 선택기를 합리적으로 사용하면 페이지 요소의 스타일을 유연하게 제어할 수 있습니다.
위 내용은 관계형 선택자란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
