CSS 근접 선택기 속성 안내: + 및 ~

위 코드에서는 먼저 너비, 높이, 아래쪽 여백 및 배경색을 정의하는 box라는 CSS 클래스를 정의합니다. 마우스를 상자 요소 위로 가져가면 배경색을 빨간색으로 변경하는 데 사용되는 :hover 의사 클래스도 정의합니다.

다음으로 + 선택기를 사용하여 첫 번째 인접 요소의 배경색을 파란색으로 정의합니다. 이는 첫 번째 상자 요소 다음의 두 번째 상자 요소의 배경색이 파란색이 됨을 의미합니다.

그런 다음 ~ 선택기를 사용하여 첫 번째 상자 요소 뒤의 모든 인접 요소의 배경색을 녹색으로 정의합니다. 이는 첫 번째 상자 요소 이후 두 번째, 세 번째 및 네 번째 상자 요소의 배경색이 모두 녹색이 됨을 의미합니다.

위 코드를 저장하고 실행하면 페이지의 상자 요소가 정의한 스타일에 따라 렌더링되는 것을 볼 수 있습니다. 마우스를 상자 요소 위로 가져가면 배경색이 빨간색으로 변경됩니다. 첫 번째 상자 요소 바로 다음에 오는 두 번째 상자 요소의 배경색은 파란색으로 변경되고, 다른 상자 요소의 배경색은 녹색으로 변경됩니다.

이것은 + 및 ~ 근접 선택기 속성을 사용한 기본 사용 예입니다. 특정 요구 사항과 페이지 구조에 따라 유연하게 사용하여 보다 다양한 효과와 레이아웃을 얻을 수 있습니다.

요약하자면 CSS 근접 선택기 속성은 인접한 HTML 요소를 선택하고 스타일을 지정하는 편리한 방법을 제공합니다. + 선택기를 사용하면 지정된 요소 바로 뒤의 첫 번째 인접 요소를 선택할 수 있습니다. ~ 선택기를 사용하면 지정된 요소 뒤의 모든 인접 요소를 선택할 수 있습니다. 이러한 선택기 속성은 더 정밀한 제어를 제공하므로 더 복잡하고 풍부한 페이지 레이아웃과 스타일 효과를 만들 수 있습니다.

이 기사가 CSS 근접 선택기 속성을 이해하고 적용하는 데 도움이 되기를 바랍니다. 궁금하신 점은 메시지를 남겨주시면 상담해드리겠습니다!

위 내용은 CSS 근접 선택기 속성 안내: + 및 ~의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!