>웹 프론트엔드 >CSS 튜토리얼 >`:hover` 및 `:visited` 의사 클래스를 사용하여 `a:before` 스타일을 지정하는 방법은 무엇입니까?

`:hover` 및 `:visited` 의사 클래스를 사용하여 `a:before` 스타일을 지정하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-15 01:36:10330검색

How to Style `a:before` with `:hover` and `:visited` Pseudo-classes?

':hover' 및 ':visited' 조건을 사용하여 'a:before' 호출 처리

'a:before'를 성공적으로 활용할 수 없음 a:before:hover'는 CSS 구문에 대한 기본적인 이해에서 비롯됩니다. 'a' 요소가 의사 클래스와 일치할 때 'a:before' 의사 요소에 스타일을 올바르게 적용하려면 형식이 'a:hover:before' 또는 'a:visited:before'여야 합니다. 이는 선택기에서 의사 요소가 의사 클래스 뒤에 옴을 의미합니다.

CSS3에서는 이중 콜론(예: 'a:hover::before' 또는 'a:visited::before)을 사용합니다. ')는 의사 클래스와 의사 요소를 구별하는 데 있어 명확성을 향상시킵니다. 그러나 IE8 이하와 같은 레거시 브라우저에는 단일 콜론이 적합합니다.

의사 클래스와 의사 요소의 순서는 사양에 엄격하게 정의되어 있습니다. 의사 요소는 연결자가 없는 선택기 체인인 단순 선택기 시퀀스의 끝에만 추가될 수 있습니다. 단순 선택자에는 유형 선택자, 범용 선택자, 속성 선택자, 클래스 선택자, ID 선택자 및 의사 클래스가 포함됩니다. 의사 클래스는 단순한 선택자이지만 의사 요소는 그렇지 않습니다.

그러나 ':hover'와 같은 사용자 작업 의사 클래스의 경우 원하는 효과가 의사 요소와의 사용자 상호 작용으로 제한되는 경우 현재 표준 CSS를 통해서는 가능하지 않습니다. 대신 실제 하위 요소에는 ':hover'를 적용해야 합니다.

위 내용은 `:hover` 및 `:visited` 의사 클래스를 사용하여 `a:before` 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.