CSS3의 새로운 선택기 개요
- 高洛峰원래의
- 2017-02-15 13:09:071526검색
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
:nth-of-type
:nth-last-of-type
:root
는 문서의 루트 요소를 선택합니다. 즉, html
:empty
는 공백이 없는 중간 요소를 선택합니다.
:not
제외 선택기
:only-child
는 컬렉션에
::selection
배경, 색상이라는 두 가지 속성만 설정할 수 있습니다.