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

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 개의 항목이 포함 된 아래 표시된 문서부터 시작합니다.

<p></p>

및 :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>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

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

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

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