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

CSS 근접 선택기 속성 가이드: + 및 ~

CSS 근접 선택기는 + 및 ~를 포함한 인접한 요소를 선택하는 데 사용되는 속성입니다.

+ 선택기는 지정된 요소 바로 뒤의 첫 번째 인접 요소를 선택하는 데 사용됩니다. HTML 구조에서 동일한 상위 요소의 두 형제 요소를 인접 요소라고 합니다.

~선택기는 지정된 요소 뒤에 있는 모든 인접 요소를 선택하는 데 사용됩니다.

이 근접 선택기 속성을 사용하여 페이지 요소 간의 스타일을 유연하게 제어할 수 있습니다. 아래에서는 특정 코드 예제를 통해 + 및 ~ 선택기의 사용법을 보여줍니다.

먼저 일련의 인접한 <div> 요소를 포함하는 간단한 HTML 문서를 만듭니다. <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; &lt;div class=&quot;box&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p> 위 코드에서는 먼저 너비, 높이, 아래쪽 여백 및 배경색을 정의하는 box라는 CSS 클래스를 정의합니다. 마우스를 상자 요소 위로 가져가면 배경색을 빨간색으로 변경하는 데 사용되는 :hover 의사 클래스도 정의합니다. </p> <p>다음으로 + 선택기를 사용하여 첫 번째 인접 요소의 배경색을 파란색으로 정의합니다. 이는 첫 번째 상자 요소 다음의 두 번째 상자 요소의 배경색이 파란색이 됨을 의미합니다. </p> <p>그런 다음 ~ 선택기를 사용하여 첫 번째 상자 요소 뒤의 모든 인접 요소의 배경색을 녹색으로 정의합니다. 이는 첫 번째 상자 요소 이후 두 번째, 세 번째 및 네 번째 상자 요소의 배경색이 모두 녹색이 됨을 의미합니다. </p> <p>위 코드를 저장하고 실행하면 페이지의 상자 요소가 정의한 스타일에 따라 렌더링되는 것을 볼 수 있습니다. 마우스를 상자 요소 위로 가져가면 배경색이 빨간색으로 변경됩니다. 첫 번째 상자 요소 바로 다음에 오는 두 번째 상자 요소의 배경색은 파란색으로 변경되고, 다른 상자 요소의 배경색은 녹색으로 변경됩니다. </p> <p>이것은 + 및 ~ 근접 선택기 속성을 사용한 기본 사용 예입니다. 특정 요구 사항과 페이지 구조에 따라 유연하게 사용하여 보다 다양한 효과와 레이아웃을 얻을 수 있습니다. </p> <p>요약하자면 CSS 근접 선택기 속성은 인접한 HTML 요소를 선택하고 스타일을 지정하는 편리한 방법을 제공합니다. + 선택기를 사용하면 지정된 요소 바로 뒤의 첫 번째 인접 요소를 선택할 수 있습니다. ~ 선택기를 사용하면 지정된 요소 뒤의 모든 인접 요소를 선택할 수 있습니다. 이러한 선택기 속성은 더 정밀한 제어를 제공하므로 더 복잡하고 풍부한 페이지 레이아웃과 스타일 효과를 만들 수 있습니다. </p> <p>이 기사가 CSS 근접 선택기 속성을 이해하고 적용하는 데 도움이 되기를 바랍니다. 궁금하신 점은 메시지를 남겨주시면 상담해드리겠습니다! </p> </div>

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