원문 주소, 조판이 더 좋다
https://xboxyan.codelabo.cn/p...
https://blog.codelabo.cn/arti...
CSS3에는 원소의 번호를 나타내는 선택기가 많은데 다음과 같은 몇 가지가 있다:first-child 、 :first-of-type 、 :last-of-type 、 :only-of-type 、 :only-child 、 :nth-child(n) 、 :nth-last-child(n) 、 :nth-of-type(n) 、 :nth-last-of-type(n) 、 :last-child
초보자는 비교적 헷갈릴 수 있으니, 여기에는 분류를 나눌 수 있다.
*-of-type
*-child :first-of-type :first-child :last-of-type :last-child :nth-of-type(n) :nth-child(n) :nth-last-of-type(n) :nth-last-child(n) :only-of-type :only-child
이를 통해 알 수 있듯이 CSS 개발자들은 모두 이러한 선택기의 기능에 대해 대체적인 인상을 가지고 있다고 믿는다. 예를 들어 first-*는 첫 번째, nth-*는 몇 번째, nth-last-*는 밑에서 몇 번째...
-of-type 및 -child
그렇다면 -of-type과 -child는 도대체 어떤 차이가 있을까?
글자 그대로 보면 type와child의 차이다.type는 유형을 나타낸다. 예를 들어 모두 p원소 또는 div원소이다.child 서브원소를 나타내며 아무런 제한이 없다
이렇게 묘사하면 직관적이지 않을 수 있으니, 아래에 실례를 하나 열거하여 설명하자.
: first-of-type 및: first-child

    
  1
    
  2
    
  1
    
  2

여기에 상호작용 실례를 써서 수시로 각 선택기의 결과를 비교할 수 있다
https://codepen.io/xboxyan/pe...
다음은 여러 가지 선택의 결과입니다.

div :first-of-type 머리글 1 및 단락 1

선택 가능

div h1:first-of-type 헤더 1

선택 가능

div p:first-of-type 단락 1

선택 가능

div .h1:first-of-type 헤더 1

선택 가능

div .h2:first-of-type 불일치

div :first-child 헤더 1

선택 가능

div p:first-child 불일치

div h1:first-child`제목 1

선택 가능

div .h1:first-child`제목 1

선택 가능

div .h2:first-child 불일치

여기에 틀리기 쉬운 부분이 있다. 예를 들어div .h2:first-of-type 많은 사람들이 첫 번째class가.h2인 요소를 선택할 줄 알았는데 사실은 그렇지 않다. 여기서 이렇게 이해할 수 있다.
우선div .h2:first-of-type은 .h2클래스에 대응하는 원소를 찾을 것이다. 여기는 h1원소이기 때문에 :first-of-type는 첫 번째 h1원소와 일치한다. 즉, 여기의class클래스는 대응하는 원소 유형의 작용만 찾을 뿐이다.다음에 결합해 보면 첫 번째h1의 원소의class는.h2가 아니기 때문에 일치할 수 없다.
마찬가지로 div p:first-child도 같은 이치이다. :first-child 첫 번째 원소를 먼저 찾은 다음에 첫 번째 원소가 p 원소가 아니기 때문에 일치하지 않는다.
이를 통해 알 수 있듯이 우리가 :first-of-type를 사용할 때 사실 표지 서명만 하면 된다. 예를 들어 div p:first-of-type 클래스 이름을 붙일 필요가 없다. 만약에 표지 서명을 하지 않으면 각 유형의 요소의 첫 번째 것을 선택한다(예 1).:first-child를 사용할 때 어떤 표지도 휴대할 필요가 없다. 왜냐하면 첫 번째 요소와 항상 일치하지 않기 때문이다. 그렇지 않으면 다른 조건을 더하면 일치하지 않는다(물론 특수 수요 제외).
그렇다면 상술한 첫 번째.h2를 실현하려면 어떻게 실현해야 합니까? 안타깝게도 이러한 방식이 만족하지 못하면 다른 방식으로만 완성할 수 있습니다. 예를 들어~선택기

    
  1
    
  2
    
  2
    
  1
    
  2

이런 상황에서 어떻게 첫 번째h1.h2를 선택합니까?
생각 좀 해봐..
바로 답을 드리도록 하겠습니다.

.h2{ 
  outline:2px solid red;
}
.h2~.h2{
  outline:0;
}

먼저 모든.h2를 선택한 다음에 형제 노드의 기타.h2를 배제한다는 뜻이다.
https://codepen.io/xboxyan/pe...
위의 몇 가지 선택기의 규칙을 이해하면 아래의 몇 가지는 모두 같다
: last-of-type 및: last-child
이것은 :first-of-type와:first-child용법과 완전히 일치하여 마지막을 나타낸다.
한 가지 주의해야 할 것은 :first-child는 CSS2의 범주로 IE8에서도 사용할 수 있다는 것을 의미하고last-child는 CSS3의 규범으로 동시에 수요를 충족시킬 수 있을 때 더 좋은 호환성이 필요하다면 사용하기를 권장한다:first-child.
매우 흔히 볼 수 있는 장면, 예를 들어 하나의 목록, 목록의 모든 항목이 하나의 분할선이다. 우리는 border를 사용하여 시뮬레이션할 수 있다. 그러면 위쪽 경계선이냐 아래쪽 경계선이냐 모두 수요를 만족시킬 수 있다.

li{
    ***
    border-top:1px solid;
}
li:first-child{
    border-top:0;
}

분명히 상단 테두리 결합:first-child을 사용하면 호환성이 더욱 좋다.
: nth-of-type(n) 및: nth-child(n)
이런 선택기는 주로 n번째 원소를 선택하는데 원소 번호와 관련이 있기 때문에 여기의 시작 번호는 1(js와 약간 다르다)n는 숫자, 키워드 또는 공식일 수 있다.
예를 들어p:nth-of-type(1)는 각 부급 아래 첫 번째p원소를 나타내는데 p:first-of-type와 같다.
키워드는 odd와 even를 선택할 수 있는데 각각 홀수와 짝수를 나타낸다. 흔히 볼 수 있는 장면은 표이다.

tr:nth-child(odd){
    background:#ff0000;
}
tr:nth-child(even){
    background:#0000ff;
}

n 공식an + b도 사용할 수 있는데 흔히 볼 수 있는 장면은 주기적인 요소를 선택하는 것이다.

p:nth-child(3n+0){
    background:#ff0000;
}

:nth-last-of-type(n) 및 :nth-last-child(n):nth-of-type(n) 및 :nth-child(n) 와 거의 일치하며, 뒤에서 계산하기만 합니다.
결합:nth-last-child(n)과 :first-child는 목록의 서로 다른 원소 수량의 서로 다른 양식을 일치시킬 수 있다
예를 들어 :nth-last-child(3):first-child는 뒤에서 앞쪽으로 세 번째 요소를 선택한 것을 의미하고 첫 번째 요소이기도 하다. 그러면 리스트에 모두 세 개의 요소가 있다고 판단할 수 있다. 형제선택기+와 ~를 결합하면 서로 다른 수량의 요소를 각각 양식을 지정할 수 있다.

li:only-child {
  height: 100%;
}
/* 2  */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) + li {
  width: 50%; height: 50%;
}
li:first-child:nth-last-child(2) + li {
  margin-left: auto;
}
/* 3  */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
  width: 50%; height: 50%;
}

여러분은 장신욱의 이 문장을 보시면 비교적 실용적인 장면이라고 할 수 있습니다:only-of-type :only-child
이것은 원소가 하나밖에 없거나 같은 유형의 원소가 하나일 때 사용하는 것을 나타낸다

    
  1
    
  2
    
  2
    
  1
      

div :only-of-type 머리글 2 텍스트 선택

div p:only-of-type 헤더 2

선택 가능

div :only-child 요소와 일치하지 않음

소절
사실 여러분은 *-of-type가 같은 유형의 원소를 선택하고, *-child는 하위 노드를 선택하면 됩니다.
미래에 더욱 전면적인 선택기가 나타날 수 있다고 믿습니다. 예를 들어nth-of-class(class에 따라 선택)nth-of-*(임의의 선택기에 따라 선택)입니다. 기대해 보세요.