CSS 근접 선택기 속성 안내: + 및 ~
- PHPz원래의
- 2023-10-20 18:24:201025검색
CSS 근접 선택기 속성 가이드: + 및 ~
CSS 근접 선택기는 + 및 ~를 포함한 인접한 요소를 선택하는 데 사용되는 속성입니다.
+ 선택기는 지정된 요소 바로 뒤의 첫 번째 인접 요소를 선택하는 데 사용됩니다. HTML 구조에서 동일한 상위 요소의 두 형제 요소를 인접 요소라고 합니다.
~선택기는 지정된 요소 뒤에 있는 모든 인접 요소를 선택하는 데 사용됩니다.
이 근접 선택기 속성을 사용하여 페이지 요소 간의 스타일을 유연하게 제어할 수 있습니다. 아래에서는 특정 코드 예제를 통해 + 및 ~ 선택기의 사용법을 보여줍니다.
먼저 일련의 인접한 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 포함하는 간단한 HTML 문서를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: gray;
}
.box:hover {
background-color: red;
}
.box + .box {
background-color: blue;
}
.box ~ .box {
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>위 코드에서는 먼저 너비, 높이, 아래쪽 여백 및 배경색을 정의하는 box라는 CSS 클래스를 정의합니다. 마우스를 상자 요소 위로 가져가면 배경색을 빨간색으로 변경하는 데 사용되는 :hover 의사 클래스도 정의합니다.
다음으로 + 선택기를 사용하여 첫 번째 인접 요소의 배경색을 파란색으로 정의합니다. 이는 첫 번째 상자 요소 다음의 두 번째 상자 요소의 배경색이 파란색이 됨을 의미합니다.
그런 다음 ~ 선택기를 사용하여 첫 번째 상자 요소 뒤의 모든 인접 요소의 배경색을 녹색으로 정의합니다. 이는 첫 번째 상자 요소 이후 두 번째, 세 번째 및 네 번째 상자 요소의 배경색이 모두 녹색이 됨을 의미합니다.
위 코드를 저장하고 실행하면 페이지의 상자 요소가 정의한 스타일에 따라 렌더링되는 것을 볼 수 있습니다. 마우스를 상자 요소 위로 가져가면 배경색이 빨간색으로 변경됩니다. 첫 번째 상자 요소 바로 다음에 오는 두 번째 상자 요소의 배경색은 파란색으로 변경되고, 다른 상자 요소의 배경색은 녹색으로 변경됩니다.
이것은 + 및 ~ 근접 선택기 속성을 사용한 기본 사용 예입니다. 특정 요구 사항과 페이지 구조에 따라 유연하게 사용하여 보다 다양한 효과와 레이아웃을 얻을 수 있습니다.
요약하자면 CSS 근접 선택기 속성은 인접한 HTML 요소를 선택하고 스타일을 지정하는 편리한 방법을 제공합니다. + 선택기를 사용하면 지정된 요소 바로 뒤의 첫 번째 인접 요소를 선택할 수 있습니다. ~ 선택기를 사용하면 지정된 요소 뒤의 모든 인접 요소를 선택할 수 있습니다. 이러한 선택기 속성은 더 정밀한 제어를 제공하므로 더 복잡하고 풍부한 페이지 레이아웃과 스타일 효과를 만들 수 있습니다.
이 기사가 CSS 근접 선택기 속성을 이해하고 적용하는 데 도움이 되기를 바랍니다. 궁금하신 점은 메시지를 남겨주시면 상담해드리겠습니다!
위 내용은 CSS 근접 선택기 속성 안내: + 및 ~의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!