CSS 의사 클래스 선택기에 대한 심층적인 이해(코드 예제)
이 글은 CSS 가상 클래스 선택자(코드 예제)에 대한 심층적인 이해를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
머리말
과거에는 :link, ::after 및 content와 같은 의사 클래스 및 의사 요소 선택자를 간헐적으로 이해하고 사용했습니다. , 최근 책을 읽다가 이 부분에 부족한 부분을 발견해서 좀 더 심도 있게 공부해 보기로 했습니다. 다음은 pseudo-class 부분을 요약한 것입니다. :link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。
伪类
伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。
HTMLAnchorElement的4大经典伪类
:link，用于设置链接初始状态时的样式;:visited，用于设置链接被点击过后的样式;:hover，用于设置鼠标悬停在链接上方时，链接的样式;:active，用于设置鼠标按键按下，但未释放时，链接的样式。
想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。
设置当前目标元素样式
还记得URL中的井号吗？从井号(#)开始到URL的末尾称为URL的hash或fragment，用于定位页面内某项资源。假设现在页面存在<h3 id="title">Target</h3>的元素，那么只要地址栏输入#title浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h3#title位于可视区的特定位置。（注意：请不要和UI Routing混为一谈）
而上述这个被定位的页面资源，被称为目标元素或当前活动元素！可通过:target设置其样式。
兼容性：IE9开始支持。
示例：
// 当前URL为http://foo.com#1
:target {
color: red;
}
.title{
color: blue;
&:target{
border: solid 1px red;
}
}
.title{I'm not target element.}
.title#1{Yes, I'm.}设置元素获得焦点时的样式
:focus用于设置元素处于focus状态下的样式。
兼容性：IE8开始支持。
那么哪些元素支持focus状态呢？那要先弄清楚通过哪些操作可能实现focus。
它们分别是：
鼠标点击;
Tab键;
通过JavaScript的
HTMLElement.prototype.focus()方法。
那么传统上支持focus状态的元素必定是a、button、input、select和textareas.
而HTML5中增加当元素设置了contenteditable或tabindex属性时，该元素支持focus状态。
也就是符合以下选择器的元素均支持focus状态。
a,button,input,select,textarea,[contenteditable],[tabindex]
注意：若tabindex属性值小于0，则无法通过Tab键获得焦点。但可以通过鼠标点击 或 脚本时元素获得焦点。
JS获取当前得到焦点的元素
/* * 加载完成时默认返回body * 若某元素获得焦点时，则返回该元素 */ document.activeElement :: HTMLElement
另外还有一个让人误会的属性
// 用于检测文档是否得到焦点，即用户是否正在与页面交互 // 页面仅仅位于屏幕可视区域，而用户没有与之交互时返回false。 document.hasFocus :: Void -> Boolean
设置子元素获得焦点时，该元素的样式
:focus-within，用于设置当子元素处于focus状态时，该元素的样式。
兼容性:Chrome63开始支持。
示例：二次确认密码时，密码框高亮
.form-control{
&:focus-within > input{
&:focus {
border: solid 1px skyblue;
}
&:not(:focus){
border: solid 1px orange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]其他
:root，用于设置<html>元素的样式，从IE9开始支持。:checked，用于设置单选和复选控件被选中的样式，从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。:empty，用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素，而p{}则为没有子节点的元素。:not，作为谓语表达取反的语义。-
Pseudo-class:placeholder-shown
:link, :visited, :hover, :active, :focus >, :focus-within, :target, :root 및 :checked.
HTMLAnchorElement의 4가지 고전 의사 클래스
-
:link, 사용됨 초기 상태의 링크 스타일을 설정합니다. -
:active, 마우스가 링크 위에 있을 때 링크 스타일을 설정하는 데 사용됩니다. 버튼을 눌렀지만 놓지 않았습니다. 🎜🎜🎜🎜 여러분이 가장 먼저 접한 것은 위의 네 가지 유사 카테고리였죠? ! 그리고 설정순서(LVAH)도 외워야겠네요, 하하. 🎜현재 대상 요소의 스타일 설정
🎜 URL에 파운드 기호를 기억하시나요? 파운드 기호(#)부터 시작하여 URL 끝까지를 해시 또는 URL 조각이라고 하며 페이지에서 특정 리소스를 찾는 데 사용됩니다.#title이 입력되어 있는 한 현재 페이지에<h3 id="title">Target</h3>요소가 있다고 가정합니다. 주소 표시줄에서h3#title요소가 시각적 영역의 특정 위치에 위치할 때까지 브라우저는 계속 스크롤합니다(스크롤에 트윈 애니메이션이 반드시 필요한 것은 아님). (참고: UI 라우팅과 혼동하지 마세요.) 🎜 위에서 언급한 위치 지정 페이지 리소스를 대상 요소 또는 현재 활성 요소라고 합니다! 스타일은:target을 통해 설정할 수 있습니다. 🎜호환성: IE9에서 지원됩니다. 🎜🎜예: 🎜rrreee요소에 포커스가 있을 때 스타일 설정
🎜:focus는 요소에 포커스가 있을 때 스타일을 설정하는 데 사용됩니다. 🎜호환성: IE8이 지원되기 시작합니다. 🎜그럼 어떤 요소가 포커스 상태를 지원하나요? 그런 다음 먼저 집중을 달성하기 위해 어떤 작업을 사용할 수 있는지 파악해야 합니다. 🎜그 내용은 다음과 같습니다: 🎜- 🎜마우스 클릭;🎜🎜
- 🎜Tab 키;🎜🎜
- 🎜JavaScript의
HTMLElement.prototype을 통해( )메소드. 🎜🎜🎜🎜그러면 전통적으로 포커스 상태를 지원하는 요소는a,button,input,select여야 합니다. 및textareas.🎜HTML5에서 요소가contenteditable또는tabindex속성으로 설정된 경우 요소는 포커스 상태를 지원합니다. 🎜즉, 다음 선택자와 일치하는 요소는 포커스 상태를 지원합니다. 🎜rrreee🎜참고:tabindex속성 값이 0보다 작은 경우 Tab 키를 통해 포커스를 얻을 수 없습니다. 그러나 요소는 마우스 클릭이나 스크립트를 통해 포커스를 얻을 수 있습니다. 🎜JS는 현재 포커스된 요소를 가져옵니다.
rrreee🎜오해의 소지가 있는 속성도 있습니다🎜rrreee하위 요소가 포커스를 받을 때 요소의 스타일을 설정하세요
🎜:focus- 내에서, 하위 요소에 포커스가 있을 때 요소의 스타일을 설정하는 데 사용됩니다. 🎜호환성: Chrome63이 지원되기 시작합니다. 🎜🎜예: 두 번째로 비밀번호를 확인할 때 비밀번호 상자가 강조 표시됩니다.🎜rrreeeOther
- 🎜
:root,<html>요소의 스타일을 설정하는 데 사용되며 IE9부터 지원됩니다. 🎜🎜- 🎜
:checked, 선택한 라디오 스타일을 설정하고 컨트롤을 확인하는 데 사용되며 IE9부터 지원됩니다. 의사 요소::before및content속성을 결합하면 유연하고 효율적인 맞춤형 라디오 및 검사 제어를 실현할 수 있습니다. 🎜🎜- 🎜
:empty, 하위 노드가 없는 요소의 스타일을 지정하는 데 사용됩니다.p{ }는 TEXT_NODE 하위 노드가 있는 요소이고,p{}는 하위 노드가 없는 요소입니다. 🎜🎜- 🎜
:not, 부정의 의미를 표현하는 술어. 🎜🎜- 🎜
:placeholder-shown, 요소 자리 표시자가 표시될 때 스타일을 설정하는 데 사용됩니다. 🎜🎜🎜🎜관련 권장 사항: 🎜🎜🎜CSS 의사 클래스 선택기🎜🎜🎜🎜🎜CSS 의사 클래스 선택기 정보_html/css_WEB-ITnose🎜🎜 - 🎜
- 🎜
위 내용은 CSS 의사 클래스 선택기에 대한 심층적인 이해(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7686
15
1639
14
1393
52
1287
25
1229
29
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
