CSS3의 새로운 선택기 개요

selector:first-child 이것은 하위 선택기입니다. 이해하기보다는 피하는 것에 주의하세요.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

하지만 문제가 있습니다. :last-child가 적용되지 않습니다.

은 다음과 같아야 합니다.
현재 선택기 부모의 상위 요소 1개
2개의 상위 모든 하위 요소, [a ,b,c]
3 하위 요소 컬렉션의 첫 번째 요소, 선택기
4인 경우 스타일 설정이 적용됩니다.

  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**

따라서 이 두 의사 클래스를 사용하고 상위 요소를 추가하는 것이 고려될 수 있습니다.

nth-child()도 위의 규칙에 적용됩니다.
여기서 n에는 개발 여지가 많습니다. 어느 것을 선택할지, 어떤 것을 먼저 선택할지, 홀수/짝수를 구현할 수 있습니다.

nth-last-child() 뒤로 선택
:first-of-type
:last-of -type
:nth-of-type
:nth-last-of-type
:root
은 문서 루트 요소를 선택합니다. 즉, html
:empty
는 요소를 선택합니다.
:not
Negative selector

:only-child
요소에 공백조차 없는 요소는 컬렉션에 요소가 하나만 있는 경우에만 적용됩니다.

::selection
은 배경, 색상의 두 가지 속성만 설정할 수 있습니다.

selector :first-child 이것은 하위 선택자이므로 피하는 것이 좋습니다. 이해해 주세요.

selector:first-child

 当前 selector 选中的元素集合中的第一个元素

selector:last-child

当前 selector 选中的元素集合中的最后一个元素.

하지만 문제가 있습니다. :last-child가 적용되지 않습니다

은 다음과 같아야 합니다.

1 현재 선택기의 상위 요소 상위
2 상위 모든 하위 요소, [a,b,c] 컬렉션의 첫 번째 요소
3개의 하위 요소인 경우 선택기
4가 스타일을 설정하면 적용됩니다.

  **if(selecor.parent.childElementList.firstElement === selector){
     生效
  }**

따라서 이 두 가상 클래스를 사용하고 여기에 상위 요소를 추가하는 것이 첫 번째 구현으로 간주될 수 있습니다. >nth-child()도 위의 규칙에 적용됩니다.

여기서 n에는 개발할 여지가 많으므로 어떤 것을 선택하고 어떤 것부터 시작할지 알 수 있습니다.

nth-last-child() 뒤로 선택
:first-of-type

:last-of-type

:nth-of-type
:nth-last-of-type
:root
는 문서의 루트 요소를 선택합니다. 즉, html
:empty
는 공백이 없는 중간 요소를 선택합니다.
:not
제외 선택기

:only-child
는 컬렉션에

::selection
배경, 색상이라는 두 가지 속성만 설정할 수 있습니다.

더 많은 CSS3 새로운 선택기 개요를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!