홀수 위치에 있는 하위 요소의 스타일을 선택하려면 :nth-child(odd) 의사 클래스 선택기를 사용하세요.-CSS 튜토리얼-php.cn

홀수 위치에 있는 하위 요소의 스타일을 선택하려면 :nth-child(odd) 의사 클래스 선택기를 사용하세요.

WBOY

풀어 주다： 2023-11-20 11:35:01

원래의

1013명이 탐색했습니다.

홀수 위치에 있는 하위 요소의 스타일을 선택하려면 :nth-child(odd) 의사 클래스 선택기를 사용하세요.

웹페이지를 디자인할 때 페이지의 하위 요소에 특별한 스타일을 적용해야 하는 경우가 있습니다. 그 중 :nth-child(홀수) 의사 클래스 선택자가 자주 사용됩니다. 이 선택자는 스타일 수정을 위해 홀수 위치의 하위 요소를 선택하는 데 사용됩니다. 다음으로, 특정 코드 예제를 통해 :nth-child(odd) 의사 클래스 선택기를 사용하는 방법을 보여드리겠습니다.

먼저 상위 요소와 여러 하위 요소를 포함하는 간단한 HTML 구조를 만들어 보겠습니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>홀수 위치에 있는 하위 요소의 스타일을 선택하려면 :nth-child(odd) 의사 클래스 선택기를 사용하세요.</title>
  <style>
    .parent {
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
    }
    .child:nth-child(odd) {
      background-color: #ffcccc;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>
</html>

로그인 후 복사

이 예에서는 먼저 여러 하위 요소를 포함하는 상위 요소를 만들고 Flex 레이아웃을 사용하여 하위 요소를 정렬합니다. 다음으로 하위 요소의 기본 스타일에 대한 너비, 높이, 배경색 및 기타 속성을 설정합니다. 그런 다음 .child:nth-child(odd) 선택기에서 :nth-child(odd) 의사 클래스 선택기를 사용하여 홀수 위치에 있는 하위 요소를 선택하고 배경색을 분홍색으로 설정합니다. 이런 방식으로 :nth-child(odd) 의사 클래스 선택기를 통해 홀수 위치에 있는 하위 요소의 스타일을 쉽게 수정할 수 있습니다.

브라우저에서 이 코드를 실행하면 홀수 위치에 있는 하위 요소의 배경색이 분홍색으로 변경되는 반면 짝수 위치에 있는 하위 요소의 배경색은 회색으로 유지되는 것을 볼 수 있습니다. 이것은 :nth-child(odd) 의사 클래스 선택기 사용의 예입니다.

실제 웹 디자인에서는 홀수 위치에 있는 하위 요소에 특별한 스타일을 설정하기 위해 :nth-child(홀수) 의사 클래스 선택기를 자주 사용하는데, 이는 페이지에 더 풍부한 시각적 효과를 가져올 수 있습니다. 이 기사의 예제를 통해 모든 사람이 :nth-child (홀수) 의사 클래스 선택기를 사용하여 페이지의 하위 요소 스타일을 아름답게 만드는 데 더 능숙해질 수 있기를 바랍니다.

위 내용은 홀수 위치에 있는 하위 요소의 스타일을 선택하려면 :nth-child(odd) 의사 클래스 선택기를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!