CSS 의사 클래스 선택기 사용에 대한 심층적인 이해(코드 예제)
이 기사는 의사 클래스 선택기(코드 예제)의 사용법에 대한 심층적인 이해를 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.
머리말
예전에는 :link, ::after, content 등의 의사 클래스와 의사 요소 선택자를 간헐적으로 이해하고 사용해왔는데, 최근 책을 읽다가 이 부분에서 부족한 점을 발견했습니다. 그래서 좀 더 심도 있게 배워보기로 했습니다. 다음은 수업 파트의 가짜 배열입니다.
Pseudo-class
의사 클래스 선택기를 사용하면 기본적으로 디자이너는 요소의 특정 상태에 따라 다양한 시각적 효과를 설정할 수 있습니다. 구체적으로는 link, :visited, :hover, :active, :focus, :focus-within, :target, :root 및 :checked입니다.
HTMLAnchorElement의 네 가지 고전 의사 클래스 HTMLAnchorElement的4大经典伪类
:link，用于设置链接初始状态时的样式;
:visited，用于设置链接被点击过后的样式;
:hover，用于设置鼠标悬停在链接上方时，链接的样式;
:active，用于设置鼠标按键按下，但未释放时，链接的样式。
想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。
设置当前目标元素样式
还记得URL中的井号吗？从井号(#)开始到URL的末尾称为URL的hash或fragment，用于定位页面内某项资源。假设现在页面存在
Target
的元素，那么只要地址栏输入#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
:active, 마우스 버튼을 눌렀지만 놓지 않았을 때 링크 스타일을 설정하는 데 사용됩니다.
여러분이 가장 먼저 접한 것은 위의 네 가지 유사 카테고리였죠? ! 그리고 설정순서(LVAH)도 외워야겠네요, 하하. 현재 대상 요소 스타일 설정 URL의 파운드 기호를 기억하시나요? 파운드 기호(#)부터 시작하여 URL 끝까지는 URL의 해시 또는 조각이라고 하며 페이지 내에서 특정 리소스를 찾는 데 사용됩니다. 이제 페이지에 Target
요소가 주소 표시줄에 입력되어 있는 한 브라우저는 계속 스크롤할 것입니다(스크롤이 반드시 그렇지 않을 수도 있습니다). 트위닝 효과 있음) h3#title 요소가 뷰포트의 특정 위치에 위치할 때까지. (참고: UI 라우팅과 혼동하지 마세요.)위에서 언급한 위치 페이지 리소스를 대상 요소 또는 현재 활성 요소라고 합니다! 스타일은 :target을 통해 설정할 수 있습니다.
호환성: IE9에서 지원됩니다..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]JS는 현재 포커스된 요소를 가져옵니다.
rrreee🎜잘못된 속성도 있습니다🎜rrreee🎜하위 요소가 포커스를 받을 때 요소의 스타일을 설정하세요🎜🎜:focus-within , 하위 요소에 포커스가 있을 때 요소의 스타일을 설정하는 데 사용됩니다. 🎜호환성: Chrome63이 지원되기 시작합니다. 🎜🎜예: 두 번째로 비밀번호를 확인하면 비밀번호 상자가 강조 표시됩니다.🎜rrreee🎜Others🎜🎜🎜:root는 <html> 요소의 스타일을 설정하는 데 사용되며 IE9부터 지원됩니다. 🎜🎜:선택됨, 선택한 라디오 스타일을 설정하고 컨트롤을 확인하는 데 사용되며 IE9부터 지원됩니다. 의사 요소 ::before와 콘텐츠 속성을 결합하면 유연하고 효율적인 맞춤형 무선 및 검사 제어를 실현할 수 있습니다. 🎜🎜: 비어 있으며, 하위 노드가 없는 요소의 스타일을 지정하는 데 사용됩니다. p{}는 TEXT_NODE 하위 노드가 있는 요소이고, p{}는 하위 노드가 없는 요소입니다. 🎜🎜:not, 부정의 의미를 표현하는 술어입니다. 🎜🎜:placeholder-shown, 요소 자리 표시자가 표시될 때 스타일을 설정하는 데 사용됩니다. 🎜🎜위 내용은 CSS 의사 클래스 선택기 사용에 대한 심층적인 이해(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7450
15
1374
52
77
11
40
19
14
8
CSS에서 호버는 무엇을 의미합니까?
Feb 22, 2024 pm 01:24 PM
CSS의 :hover는 사용자가 특정 요소 위로 마우스를 가져갈 때 특정 스타일을 적용하는 데 사용되는 의사 클래스 선택기입니다. 요소 위로 마우스를 가져가면 :hover를 통해 요소에 다양한 스타일을 추가하여 사용자 경험과 상호 작용을 향상할 수 있습니다. 이 기사에서는 hover의 의미에 대해 자세히 논의하고 특정 코드 예제를 제공합니다. 먼저 CSS에서 :hover의 기본 사용법을 이해하겠습니다. CSS에서는 선택기를 사용하여 :hover 효과를 적용하려는 요소를 선택하고 그 뒤에 추가할 수 있습니다.
CSS에서 li 태그 앞의 점을 제거하는 방법
Apr 28, 2024 pm 12:36 PM
CSS의 li 태그에서 점을 제거하는 방법에는 두 가지가 있습니다. 1. "list-style-type: none;" 스타일을 사용합니다. 2. 투명 이미지와 "list-style-image: url("transparent.png")을 사용합니다. ; "스타일. 두 방법 모두 모든 li 태그의 점을 제거할 수 있습니다. 특정 li 태그의 점만 제거하려면 의사 클래스 선택기를 사용할 수 있습니다.
사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다.
Nov 20, 2023 am 11:52 AM
사용 방법:nth-child(-n+5) 의사 클래스 선택기를 사용하여 위치가 5보다 작거나 같은 하위 요소의 CSS 스타일을 선택합니다. CSS에서 의사 클래스 선택기는 다음과 같은 강력한 도구입니다. 특정 선택 방법을 통해 선택됩니다. HTML 문서의 특정 요소입니다. 그 중 :nth-child()는 특정 위치의 자식 요소를 선택할 수 있는 일반적으로 사용되는 가상 클래스 선택자입니다. :nth-child(n)은 HTML의 n번째 자식 요소와 일치할 수 있고, :nth-child(-n)는 일치할 수 있습니다.
CSS에서 ::의 의미는 무엇입니까?
Apr 28, 2024 pm 03:45 PM
CSS의 :: 의사 클래스 선택기는 요소의 특수 상태나 동작을 지정하는 데 사용되며 의사 클래스 선택기보다 더 구체적이며 요소의 특정 속성이나 상태를 선택할 수 있습니다.
HTML에서 hover의 역할
Feb 20, 2024 am 08:58 AM
HTML 및 특정 코드 예제에서 호버의 역할 웹 개발에서 호버는 사용자가 요소 위에 커서를 놓으면 일부 작업이나 효과가 트리거되는 것을 의미합니다. 이는 CSS :hover 의사 클래스를 통해 구현됩니다. 이번 글에서는 hover의 역할과 구체적인 코드 예시를 소개하겠습니다. 첫째, hover를 사용하면 사용자가 요소 위로 마우스를 가져갈 때 요소의 스타일이 변경됩니다. 예를 들어 버튼 위에 마우스를 올리면 버튼의 배경색이나 텍스트 색상을 변경하여 사용자에게 다음에 수행할 작업을 상기시킬 수 있습니다.
CSS에서 콘텐츠 속성 사용
Feb 19, 2024 am 10:56 AM
CSS의 content 속성 사용 CSS의 content 속성은 의사 클래스에 추가 콘텐츠를 삽입하는 데 사용되는 매우 유용한 속성입니다. 콘텐츠 속성은 일반적으로 의사 클래스 선택기(예: ::before 및 ::after)에서만 사용할 수 있으며 텍스트나 이미지와 같은 콘텐츠를 삽입하는 데 사용할 수 있습니다. content 속성을 통해 매우 멋진 효과를 얻을 수 있습니다. 다음은 content 속성의 몇 가지 용도와 특정 코드 예제입니다.
CSS에서 호버를 사용하는 방법
Feb 23, 2024 pm 12:06 PM
CSS의 hover 의사 클래스는 마우스를 요소 위로 가져갈 때 요소의 스타일을 변경할 수 있는 매우 일반적으로 사용되는 선택기입니다. 이 문서에서는 hover 사용법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 기본 사용법 hover를 사용하려면 먼저 요소의 스타일을 정의한 다음 :hover 가상 클래스를 사용하여 마우스를 가리키고 있을 때 해당 스타일을 지정해야 합니다. 예를 들어, 버튼 위에 마우스를 올리면 버튼의 배경색이 빨간색으로 바뀌고 텍스트 색상이 흰색으로 바뀌고 싶습니다.
:nth-last-child(2) 의사 클래스 선택기를 사용하여 마지막에서 두 번째 하위 요소의 스타일을 선택하세요.
Nov 20, 2023 am 11:22 AM
끝에서 두 번째 자식 요소의 스타일을 선택하려면 :nth-last-child(2) 의사 클래스 선택기를 사용하세요. CSS에서 의사 클래스 선택기는 선택하는 데 사용할 수 있는 매우 강력한 도구입니다. 문서 트리. 그 중 하나는 :nth-last-child(2) 가상 클래스 선택기인데, 이는 마지막에서 두 번째 자식 요소를 선택하고 여기에 스타일을 적용합니다. 먼저 이 의사 클래스 선택기를 사용할 수 있도록 샘플 HTML 문서를 만들어 보겠습니다. ~에 의해
