의사 클래스 - 기본

Alexis Goldstein, Louis Lazaris 및 Estelle Weyl의 "Html5 & Css3"에서 "html5 & css3"에서 적응)

코어 포인트

CSS 의사 클래스는 구조, 사용자 운영, 입력 및 음수 의사 클래스를 포함한 요소의 특수 상태를 정의하는 데 사용됩니다. 문서 트리의 요소 위치, 사용자 상호 작용, 양식 요소 상태 또는 특정 선택기와 일치하지 않는 요소를 기반으로 요소를 스타일링 할 수 있습니다.

일부 의사 클래스에는 의사 클래스와 같은 보안 문제가 발생할 수 있으며, 이는 공격자가 사용자의 탐색 기록을 확인하는 데 사용할 수 있습니다. 최신 브라우저는이 문제를 방지하기 위해

에 적용 할 수있는 스타일을 제한합니다. 접근성을 향상시키기 위해 모든 방문자가 마우스를 사용하여 웹 사이트를 탐색하는 것은 아니기 때문에

가 포함 된 를 추가하는 것이 좋습니다.
대부분의 최신 브라우저는 모든 CSS 의사 클래스를 지원하는 반면 일부 이전 브라우저는 및

와 같은 특정 의사 클래스를 지원하지 않을 수 있습니다. selectivizr와 같은 자바 스크립트 라이브러리는 인터넷 익스플로러와 같은 지원이없는 브라우저에서 이러한 의사 클래스를 찾는 데 사용될 수 있습니다.

CSS 의사 클래스

당신은 이미 일부 사용자 상호 작용 의사 클래스, 즉 ,

, , , 및 :visited에 익숙 할 수 있습니다. :visited :hover 중요한 팁 : 키 포인트 :focus 의사 클래스에는 보안 문제가있을 수 있으므로 브라우저는 방문한 링크에 모든 CSS 속성을 적용하는 것을 지원하지 않습니다. 이러한 제한이 없으면 악의적 인 웹 사이트는 사용자가 방문한 링크 스타일 (예 : 방문한 각 링크 앱에 고유 한 배경 이미지)에 대한 인기있는 웹 사이트 또는 은행을 방문했는지 확인할 수 있습니다. 이를 통해 공격자는 허가없이 사용자의 탐색 기록을 볼 수 있습니다. 따라서 현대식 브라우저는

에 적용 할 수있는 스타일을 제한합니다. 이 사양은 사용자 에이전트 (UAS)가 모든 링크를 미등록 링크로 취급하거나 다양한 방법으로 액세스 및 연설되지 않은 링크를 제시하면서 사용자 개인 정보를 보호하기위한 다른 측정을 구현할 수 있음을 명시하여 이러한 변경을 명시 적으로 허용합니다. 접근성을 향상 시키려면

가 포함 된 :nth-child()가 포함되어 있습니다. 모든 방문자가 마우스를 사용하여 웹 사이트를 탐색하는 것은 아니기 때문입니다. 는 링크 및 양식 컨트롤뿐만 아니라 페이지의 모든 요소에 적용될 수 있습니다. :nth-last-child()는 링크, 양식 컨트롤, 편집 가능한 컨텐츠 요소 및 속성이있는 모든 요소와 관련이 있습니다.

이 기본적인 의사 클래스를 잠시 동안 사용하고 있었을 수도 있지만, 다른 의사 클래스가 많이 있습니다. 이러한 의사 클래스 중 일부는 수년간 사양에 관한 것이었지만 브라우저가 새로운 HTML5 양식 특성을 지원하기 시작할 때까지 지원되지 않았거나 일반적으로 이해되지 않았습니다. 다음 의사 클래스는 속성, 사용자 상호 작용 및 양식 제어 상태를 기반으로 요소와 일치합니다.

: 활성화 된 사용자 인터페이스 요소, 기본적으로 속성을 ​​지원하지만 현재 해당 속성을 적용하지 않는 모든 양식 컨트롤입니다.
• :enabled : 대신, 비활성화 된 사용자 인터페이스 요소 : 속성을 ​​지원하고 현재 해당 속성이 적용되는 모든 양식 컨트롤입니다. disabled
: 선택 또는 확인 된 라디오 버튼 또는 확인란.
• : 선택하거나 선택하지 않은 양식 요소. 예를 들어, 모든 확인란을 선택하여 확인란 세트를 선택한 다음 그룹의 모든 확인란을 선택하지는 않지만 모든 선택을 선택할 수 없음을 나타내려면 모든 것을 불확실한 상태 (JavaScript 사용)로 설정할 수 있습니다. 선택하거나 확인하지 않았습니다. :disabled :이 선택기는 현재 활성 페이지에서 앵커 포인트의 대상 요소를 선택합니다. 이것은 실제보다 더 복잡하게 들립니다. 대상의 ID 전에 disabled 문자를 사용하여 페이지 내의 앵커 링크를 만들 수 있다는 것을 이미 알고 있습니다. 예를 들어, 페이지에 "컨텐츠로 건너 뛰기"링크가있을 수 있으며 해당 링크를 클릭하면 ID "컨텐츠"가있는 요소로 이동합니다. 이렇게하면 주소 표시 줄의 URL이 로 변경되고
선택기는 이제 문서의 요소와 ID "내용"과 일치합니다. 일시적으로 셀렉터
• 를 포함시킨 것과 같습니다. 사용자가 다른 앵커 포인트를 클릭하면 :checked가 새로운 대상과 일치하기 때문에 "임시"라고 말합니다.
• : 유사한 요소 세트에서 기본값 인 하나 이상의 UI 요소에 적용됩니다. 예를 들어, 페이지가로드 될 때 동일한 이름의 라디오 버튼 세트의 라디오 버튼이 선택되면 그룹의 다른 라디오 버튼이 동일한 이름을 선택한 후에도 계속 일치합니다. 마찬가지로, 페이지로드가 선택되지 않은 후에도 :indeterminate가 계속 일치 할 때 선택된 확인란이 계속 일치합니다.
• : 유형, 패턴 또는 기타 입력 속성에 따라 유효한 요소 (4 장에서 논의한 바와 같이). :target # : 유형 또는 패턴 속성 정의의 요구 사항을 충족 할 수없는 빈 필수 요소 및 요소. thispage.html#content :target :이 한계 내에서 범위 제한과 값이있는 요소. 예를 들어, 이것은 및 속성을 ​​갖춘 날짜/시간, 번호 및 범위 입력 유형에 적용됩니다. 값이 null이면 #content입니다. :target : Antonym of
: 값이 범위 제한을 초과하는 요소. 결 측값은 비어 있기 때문에 범위에 있지 않습니다.
• :default : :default 속성 세트가있는 양식 컨트롤입니다. :default
: 모든 형태의 속성이없는 모든 양식이 제어됩니다.
• :valid : 사용자의 요소는 콘텐츠를 변경할 수 없습니다. 이들 중 대부분은
속성 세트와 양식 필드가있는 요소를 제외한 요소입니다.
• : 사용자는 구성 요소 및 쓰기 가능한 입력 필드와 같은 컨텐츠의 요소를 변경할 수 있습니다. :read-write contenteditable 양식 컨트롤에서 속성을 지원하는 브라우저에서 이러한 속성에 대한 브라우저 지원이 완료됩니다. 즉, 및
pseudo-category를 지원하는 브라우저. ie8 및 이전 버전은 ,

, 및 를 지원하지 않습니다. 좋은 소식은 IE9가 사용자 인터페이스 선택기는 아니지만 이러한 선택기를 지원한다는 것입니다. IE10 및 IE11 Support required, pattern 및 :valid를 지원하지만 , :invalid, :checked, :enabled, , :disabled를 지원하지 않습니다. 지원은 여전히 ​​부족하지만 selectivizr와 같은 JavaScript 라이브러리는 인터넷 익스플로러에서 이러한 의사 클래스를 찾는 데 도움이 될 수 있습니다. :target CSS 의사 클래스 (FAQS)의 FAQS (FAQS) :indeterminate :required (FAQ 부품은 길이가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. 일부 FAQ는 필요에 따라 선택적으로 유지되거나 다시 작성 될 수 있으며 원래 의미와 일치 할 수 있습니다.) > :optional

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