CSS 의사 클래스 : 지수를 기반으로 한 스타일 요소-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 의사 클래스 : 지수를 기반으로 한 스타일 요소

Lisa Kudrow

Feb 19, 2025 am 11:26 AM

CSS 선택기 : 문서 하위 트리의 요소 위치를 기반으로 한 의사 클래스 선택

CSS Pseudo-classes: Styling Elements Based on Their Index 코어 포인트

CSS는 문서 하위 트리의 위치에 따라 요소와 일치하는 하위 인덱스 의사 클래스라고하는 선택기를 제공합니다. 여기에는 , ,

, , 및 가 포함됩니다.

pseudo 클래스는 기능적이며 :first-child 키워드, :last-child 키워드, 정수 또는 :only-child 형태로 매개 변수를 허용 할 수 있습니다. 여기서 a는 단계 간격이고 b는 다음과 같습니다. 바이어스 시프트, N은 양의 정수입니다. :nth-child() :nth-last-child() 의사 클래스는 요소가 다른 요소의 유일한 자식이라면 요소와 일치합니다. 의사 클래스는 공백이 아닌 자식 요소가없는 요소를 선택할 수 있습니다.

CSS는 인덱스 값을 기반으로 요소와 일치하지만 특정 유형의 요소로 제한되는 유형의 하위 인덱스 의사 클래스를 제공합니다. 여기에는 ,

, :nth-child(), , 및 가 포함됩니다. :nth-last-child() odd CSS는 또한 문서 하위 트리의 위치에 따라 일치하는 요소에 대한 선택기를 제공합니다. 이를 유형, 속성 또는 ID가 아닌 요소의 위치 또는 순서에 의존하기 때문에 하위 인덱스 의사 클래스라고합니다. 총 5 개가 있습니다 even An B

:only-child :empty

:first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() 및

당신이 이름에서 추측 한대로 및

의사 클래스를 사용하여 노드 (요소)의 첫 번째 또는 마지막 하위 요소 인 요소를 선택할 수 있습니다. 다른 의사 클래스와 마찬가지로 및

는 간단한 선택기에 의해 정의 될 때 가장 부작용이 가장 적습니다.

아래의 HTML과 CSS를 살펴 보겠습니다 :

:first-child 아래 그림에서 어떻게 생겼는지 알 수 있습니다.

:last-child

가 제한되지 않기 때문에 :only-child 요소와 첫 번째

요소는 분홍색입니다. 결국,

는 의 첫 번째 자식 요소이고 :nth-child()는 요소의 첫 번째 자식 요소입니다. 그러나 왜 나머지

요소가 녹색입니까?

도 제한되지 않기 때문에 :nth-last-child()는 의 마지막 자식 요소입니다. 우리는 실제로 와

를 입력했습니다.

간단한 선택기를 추가하여

및 자격을 갖추면 더 의미가 있습니다. 항목을 나열하도록 선택을 제한합시다. :first-child로 :last-child로, :first-child로 변경하십시오. 다음 그림은 결과를 보여줍니다. li:first-child :last-child li:last-child

및

CSS Pseudo-classes: Styling Elements Based on Their Index 문서의 첫 번째 및 마지막 어린이 요소를 선택할 수있어서 반갑습니다. 그러나 우리가 홀수 또는 심지어 요소를 선택하려면 어떻게해야합니까? 어쩌면 문서 서브 트리에서 여섯 번째 요소를 선택하거나 세 가지 요소마다 스타일을 적용하려고합니다. 이것은 및 의사 클래스가 작용하는 곳입니다.

like , `:nth-child()` 및 `:nth-last-child()`도 기능적 의사 클래스입니다.

키워드 키워드 2 또는 8과 같은 정수 또는 :nth-child() :nth-last-child() 형식의 매개 변수, 여기서 a는 단계 간격이고, b는 오프셋이고, n은 양의 정수를 나타내는 변수이다.

마지막 항목에는 약간의 복잡성이 있습니다. 나중에 논의하겠습니다. :not() :nth-child()와 :nth-last-child()의 차이점은 무엇입니까? 출발점 :

카운트 앞으로,

odd 및
even
로 로 전환하면 아래 그림과 같이 카운트가 바닥에서 시작 되므로이 밴드를 반전시킵니다.
An B 더 복잡한 매개 변수의 복잡한 예를 시도하는 방법은 무엇입니까? 20 개의 항목이 포함 된 아래 표시된 문서부터 시작합니다.

및 :nth-child()를 사용하여 특정 위치에서 개별 자식 요소를 선택할 수 있습니다. 특정 위치 후에 :nth-last-child()의 모든 하위 요소를 선택하거나 오프셋으로 배수로 요소를 선택할 수 있습니다. 여섯 번째 프로젝트의 배경색을 바꾸자 : 이것은 다음과 같은 결과를 제공합니다.

<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2 id="List-of-fruits">List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</body>

그러나 세 가지 요소를 선택하려면 어떻게해야합니까? 이곳은 문법이 시작되는 곳입니다 :

마찬가지로 A는 스텝 길이 간격입니다. 1부터 시작하여 N의 승수와 거의 같습니다. 따라서 a = 3이면 3n은 3, 6, 9와 같은 요소와 일치합니다. 아래에서 볼 수 있듯이 이것은 정확히 발생합니다.

CSS Pseudo-classes: Styling Elements Based on Their Index 일이 더 흥미로워지는 곳이 있습니다. 우리는

와

를 사용하여 포인트 후 모든 요소를 선택할 수 있습니다. 처음 일곱 가지 요소를 제외한 모든 요소를 선택해 보겠습니다. An B 여기에는 스텝 크기 값이 없습니다. 따라서 n 8은 아래와 같이 8 번째 요소에서 시작하는 각 요소 N과 일치합니다.

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

참고 : 음의 오프셋

음의 오프셋 및 범위 값도 유효합니다.

를 사용하면 선택을 반전하고 처음 8 개의 요소와 일치합니다. CSS Pseudo-classes: Styling Elements Based on Their Index

다음 이미지 에서이 선택기의 결과를 볼 수 있습니다.

:nth-child() :nth-last-child()

.item:nth-child(6) {
  background: #e91e63;
}

요소가 다른 요소의 고유 한

자식이라면 의사 클래스는 해당 요소와 일치합니다. 아래는 두 개의 변하지 않은 목록입니다. 첫 번째 프로젝트에는 프로젝트가 있고 두 번째 프로젝트에는 세 가지가 포함되어 있습니다.

Apple 사용은 첫 번째 목록의 유일한 자식 요소이므로 Apple을 선택합니다. 그러나 두 번째 목록의 모든 항목은 세 가지 형제 요소가 있기 때문에 일치하지 않습니다. 아래 그림에서 어떻게 보이는지 볼 수 있습니다. CSS Pseudo-classes: Styling Elements Based on Their Index

`:empty`

pseudo 클래스를 사용하여 하위 요소없이 요소를 선택할 수도 있습니다. 우리가

라고 말할 때, 우리는 :empty empty 를 의미합니다. 요소가 pseudo-class와 일치하게하려면 다른 공백도 포함 할 수 없습니다. 다시 말해, :empty 는 일치하지만 는 일치하지 않습니다. 때로는 Wysiwyg 편집기가 컨텐츠에 빈 P 요소를 삽입합니다. :empty 를 사용하여  를 사용하여 이러한 요소에 스타일을 적용하지 않습니다. :empty 지수 에 따라 특정 유형의 요소를 선택하십시오 이전 섹션에서 논의 된 의사 클래스는 문서 서브 트리에서 주어진 위치를 차지하는 경우 요소와 일치합니다. 예를 들어, :not()는 부모 요소의 두 번째 요소 인 각 p 요소를 선택합니다. p:not(:empty) 이 섹션에서는 타이핑 된 하위 인덱스 의사 클래스에 대해 논의 할 것입니다. 이 의사 클래스는 또한 인덱스 값을 기준으로 요소와 일치하지만 일치는 특정 유형의 요소로 제한됩니다. 예를 들어, 다섯 번째 P 요소 또는 균일 인덱스가있는 H2 요소를 선택하십시오.

비 유형의 상대와 같은 이름을 가진 5 개의 그러한 의사 클래스가 있습니다 :

p:nth-last-child(2)

:first-of-type 이러한 의사 클래스와 하위 인덱스 의사 클래스의 차이는 미묘합니다. 여기서 는 P 요소 인 경우에만 다섯 번째 항목과 일치하고
약간 다른 문서부터 시작하겠습니다. 여전히 20 개의 항목이 있지만 일부는 P 요소이고 일부는 div 요소입니다. P 요소는 아래와 같이 둥근 모서리가 있습니다. :last-of-type
:only-of-type 사용 ,
:nth-of-type()를 사용하십시오
:nth-last-of-type() 이것은 아래와 같이 부모 요소의 첫 번째 p 요소 인 각 p 요소와 일치합니다.

의사 클래스는 비슷하게 작동하며, 이는 아래와 같이 부모 요소의 마지막 요소와 일치합니다. 그러나 요소가 부모 요소의 고유 한 p:nth-child(5) 인 경우 p:nth-of-type(5)는 아래와 같이 해당 요소와 일치합니다.

CSS Pseudo-classes: Styling Elements Based on Their Index 를 사용하여 다른 예를 살펴 보겠습니다. 그러나 이번에는 의사 요소를 사용합니다. 이 장의 앞부분에서 언급 된 pseudo element를 아직도 기억하십니까? 보시다시피, 그것은 적용하는 각 요소에 대한 초기 대문자를 만듭니다. 한 걸음 더 나아가서이 초기 대문자를 첫 번째 단락으로 제한합시다 : CSS Pseudo-classes: Styling Elements Based on Their Index

다음 이미지에 표시된 것처럼 이제 제목이 선행 되더라도 이제 우리의 단락에는 초기 대문자가 있습니다.

:first-of-type ::first-letter

사용 및

<meta charset="utf-8">
<title>:first-child and :last-child</title>
<body>
  <style>
    body {
      font: 16px/1.5 sans-serif;
    }
    :first-child {
      color: #e91e63;
    }
    :last-child {
      color: #4caf50;
    }
  </style>
  <h2 id="List-of-fruits">List of fruits</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Oranges</li>
    <li>Strawberries</li>
  </ul>
</body>

및

는 또한 기능적 의사 클래스입니다. 그들은 CSS Pseudo-classes: Styling Elements Based on Their Index 및

와 동일한 매개 변수를 허용합니다. 그러나 및

와 마찬가지로 인덱스는 동일한 유형의 요소로 해결됩니다. 예를 들어, 첫 번째 P 요소와 각 후속 P 요소를 선택하려면 : 로 `:nth-of-type` 키워드를 사용할 수 있습니다. `:nth-last-of-type` 아래 이미지에서 볼 수 있듯이 홀수 번호가있는 자식 요소가 아닌 홀수 번호가있는 P 요소에만 일치합니다.

:nth-of-type() 마찬가지로 :nth-last-of-type()를 사용하여 짝수 번호가 매겨진 P 요소를 선택하지만 문서의 마지막 P 요소 (이 경우 항목 18) (아래 참조)로 시작합니다. :nth-child() :nth-last-child() :first-of-type 이것이 여전히 흐릿 해 보인 경우 Paul Maloney의 nth-test 도구를 사용하거나 Nth Master의 예제를 확인하십시오. 두 프로젝트 모두 이러한 의사 클래스에 대해 더 많이 배울 수있는 훌륭한 방법입니다. :last-of-type odd [5] 이 :nth-of-type() 구문은 CSS 구문 모듈 레벨 3에 설명되어 있습니다.

CSS 의사 클래스 및 인덱스 기반 요소 스타일 에 대한 FAQ CSS 의사 클래스 란 무엇입니까?

tr:nth-child(even) {
  background: rgba(96, 125, 139, 0.1);
}

CSS 의사 클래스는 선택기에 추가 된 키워드이며 선택된 요소의 특수 상태를 지정하는 데 사용됩니다. 예를 들어,

는 사용자의 포인터가이를 떠날 때 버튼의 색상을 변경하는 데 사용될 수 있습니다. 의사 클래스는 클래스 및 ID와 함께 HTML 태그를 변경하지 않고 요소에 스타일을 적용하는 방법입니다.

의사 클래스는 어떻게 작동합니까? `:nth-child` 의사 클래스는 동시 요소 그룹의 요소 위치에 따라 요소와 일치합니다. "a"와 "b"는 정수 값 인 함수와 같은 구문

를 사용합니다. "N"은 0에서 시작하는 카운터이며 각 요소에 대해 1 씩 증가합니다. "B"는 첫 번째 요소 (b = 1)부터 시작하여 선택해야 할 요소를 의미합니다.

:nth-child와 :nth-child(an b)의 차이점은 무엇입니까?

모든 형제 요소에서 요소의 위치를 기반으로 요소와 일치하는 반면,

는 동일한 유형의 형제 자매 요소의 위치 만 고려합니다. 예를 들어, `요소 인 경우 두 번째 하위 요소가 선택되고 <code>:nth-child`는 두 번째 `요소를 선택합니다. 다른 형제 요소의 위치. <code>:nth-of-type` 주어진 클래스 이름을 사용하여 첫 번째, 두 번째 또는 세 번째 요소를 선택하는 방법은 무엇입니까?

당신은 클래스 선택기와 함께

pseudo 클래스를 사용할 수 있습니다. 예를 들어, :nth-child는 클래스 "myclass"가있는 첫 번째 요소를 선택합니다. 요소가 부모 요소의 첫 번째 자식 인 경우에만 작동합니다. :nth-of-type 에서 음수 값을 사용할 수 있습니까? p:nth-child(2)  아니요, p:nth-of-type(2) 음수 값은 허용되지 않습니다. 당신이 사용할 수있는 최소값은 0이므로 요소를 선택하지 않습니다.  각각 또는 홀수 요소를 선택하는 방법은 무엇입니까?

"짝수"및 "홀수"키워드를 사용하여

를 사용하여 각 짝수 또는 홀수 요소를 선택할 수 있습니다. 예를 들어,

는 첫 번째 요소에서 시작하는 각 초 요소를 선택합니다.

다른 의사 클래스와 함께 :nth-child를 사용할 수 있습니까? .myClass:nth-child(1) 예, 다른 의사 클래스와 함께

를 사용할 수 있습니다. 예를 들어,

는 사용자의 포인터가 두 번째 자식 요소 위로 떠 다니면 스타일을 적용합니다. `:nth-child`

와 사이에 성능 차이가 있습니까? :nth-child 대부분의 경우 성능 차이는 무시할 수 있습니다. 그러나 많은 수의 요소를 다룰 때

는 동일한 유형의 형제 요소 만 고려하기 때문에 약간 빠를 것입니다.

의사 요소와 함께

를 사용할 수 있습니까?

아니오, 의사 요소는 :nth-child와 함께 사용할 수 없습니다. 왜냐하면 문서 트리의 일부로 간주되지 않기 때문입니다. :nth-child(even)

브라우저 호환성 문제가 있습니까?

모든 최신 브라우저는 잘 지원됩니다. 그러나 Internet Explorer 8 이하는 지원되지 않습니다. 이 브라우저의 경우 유사한 효과를 달성하려면 JavaScript 또는 JQuery를 사용해야 할 수도 있습니다. `:nth-child` 모든 사진은 원래 형식과 위치로 유지됩니다.

위 내용은 CSS 의사 클래스 : 지수를 기반으로 한 스타일 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

WebStorm Mac 버전

유용한 JavaScript 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.