:first-child 의사 클래스 선택기를 사용하여 첫 번째 하위 요소의 CSS 스타일을 선택하세요.

첫 번째 하위 요소의 CSS 스타일을 선택하려면 :first-child 의사 클래스 선택기를 사용하세요.

CSS의 의사 클래스 선택기는 특정 요소를 선택하고 수정할 수 있는 강력한 도구입니다. 그 중 :first-child 의사 클래스 선택자는 일반적으로 사용되는 선택자로, 자식 요소의 종류나 위치에 상관없이 해당 요소의 첫 번째 자식 요소를 선택할 수 있다. 이 글에서는 :first-child 의사 클래스 선택기를 사용하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다.

먼저 간단한 HTML 코드 예제를 살펴보겠습니다.

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

이 예제에는 사과, 바나나, 오렌지라는 세 개의 목록 항목(li)이 있는 순서가 지정되지 않은 목록(ul)이 있습니다. 이제 첫 번째 목록 항목(예: Apple)의 텍스트 색상을 빨간색으로 설정한다고 가정하면 :first-child 의사 클래스 선택기를 사용하여 이 효과를 얻을 수 있습니다.

다음은 구체적인 CSS 코드 예입니다.

ul li:first-child {
  color: red;
}

이 코드에서는 :first-child 의사 클래스 선택기를 사용하여 ul 요소 아래의 첫 번째 li 요소를 선택합니다. 그런 다음 선택한 요소의 텍스트 색상을 빨간색으로 설정합니다.

이 CSS 코드를 예제에 적용하면 첫 번째 목록 항목(사과)의 글꼴 색상이 빨간색으로 변경되고 다른 두 목록 항목(바나나 및 주황색)은 기본 색상을 유지하게 됩니다.

또한 다음은 여러 중첩된 요소가 있는 더 복잡한 HTML 예입니다.

<div class="container">
  <h1>Hello, world!</h1>
  <p>Welcome to my website.</p>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>

첫 번째 목록 항목을 선택하고 해당 텍스트 색상을 빨간색으로 설정하려면 항목을 약간 수정해야 합니다. 이제 :first-child 의사 클래스 선택기를 사용하여 ul 요소의 첫 번째 하위 요소를 선택하고 텍스트 색상을 빨간색으로 설정해야 합니다. 구체적인 CSS 코드는 다음과 같습니다.

.container ul li:first-child {
  color: red;
}

이 코드에서는 먼저 .container 클래스 아래의 ul 요소를 선택한 다음 :first-child 의사 클래스 선택기를 사용하여 ul 요소의 첫 번째 li 요소를 선택합니다. 마지막으로 선택한 요소의 텍스트 색상을 빨간색으로 설정합니다.

요약하자면, :first-child 의사 클래스 선택기를 사용하면 요소의 첫 번째 하위 요소를 쉽게 선택하고 여기에 특정 CSS 스타일을 적용할 수 있습니다. 단순한 요소이든 복잡한 중첩 구조이든 이 선택기는 원하는 효과를 얻는 데 도움이 될 수 있습니다. 이 기사에 제공된 코드 예제가 도움이 되기를 바랍니다.

위 내용은 :first-child 의사 클래스 선택기를 사용하여 첫 번째 하위 요소의 CSS 스타일을 선택하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!