의사 클래스 선택자 요약

의사 클래스 선택자 요약

의사 클래스 선택자에는 구조적 의사 클래스, UI 의사 클래스, 동적 의사 클래스 및 기타 의사 클래스의 4가지 유형이 있습니다. 자세한 내용은 다음과 같습니다

1. 구조적 의사 클래스 선택기 구조적 의사 클래스 선택 문서에서의 위치에 따라 요소를 선택할 수 있습니다. 이러한 요소에는 접두사 ":"
   1이 있습니다. 루트 요소 선택기는 html과 같은 하단 태그에서만 작동합니다. ...
   
   :root

   2. 모든 하위 요소를 선택하려면 하위 요소 선택기가 더 자세해야 합니다. gt;li:last-child{ } 증가 의사 클래스 last-child 마지막 항목
   

   ul> ;li:only-child{ } 의사 클래스 추가 only-child 하나만 있는 항목은 유일한 하위에 영향을 줍니다
   div>p: only-of type{ } 의사 클래스 only-of -type 추가는 지정된 유형의 하위 요소를 선택합니다. 실제로 이 기능은 단일 div>p

   

   

   범위를 제한하려면 사전 선택기를 사용하여 의사 클래스를 추가해야 합니다

   

   3.ul>li:nth-child(2) { }           ul 아래에 있는 li의 두 번째 하위 요소
   ul>li:nth-last-child(2)                                                                                                              

   UI 의사 클래스 선택기

   :enable

   :disable
2. html 파일

   css 파일

   
   효과

   

   :선택됨 유효

   html 파일

css 파일

가 확인되고 숨겨집니다

:기본값은 유효하며 거의 사용되지 않습니다

css 파일

:val ID가 합법적일 때 유효

:invalid 불법일 때 유효

html 파일

css 파일

정확한 숫자를 입력하시면 초록색으로 변합니다.

:필수 부분을 채워야 적용됩니다

선택사항 아니오 필수로 적용됩니다

html file

css file

a:link 태그 사이의 텍스트에 적용

input:focus

텍스트 입력 전환 커서와 입력 상자의 색상이 변경됨

기타 의사 클래스 선택자

_

교체 전

css 파일

일부 빈 부분에 영향을 주지 않으려면

p:empty{ }와 같이 지정하면 CSS가 빈 태그에만 영향을 미칩니다. p

다음 이후 바꾸기

:lang

:target 페이지에 앵커 포인트를 배치하면 특정 위치가 즉시 적용됩니다.

이름 또는 id를 사용할 수 있으며 하이퍼링크 의 경우 #anchor name을 브라우저에 직접 입력하면 이후와 동일한 효과가 있으므로 앵커 포인트를 설정할 수 있습니다. href를 누르세요.

테스트할 때 끝에 "# 앵커 이름"을 추가하세요

효과(실제로 포지셔닝 앵커는 매우 긴 일부 페이지에서 더 자주 발생하며 한 지점에 배치될 수 있습니다) .그리고 가장자리가 빨갛게 변합니다.)

위 내용은 의사 클래스 선택자 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!