CSS 의사 클래스 선택기에 대한 심층적인 이해(코드 예제)

이 글은 CSS 가상 클래스 선택자(코드 예제)에 대한 심층적인 이해를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

머리말

과거에는 :link, ::after 및 content와 같은 의사 클래스 및 의사 요소 선택자를 간헐적으로 이해하고 사용했습니다. , 최근 책을 읽다가 이 부분에 부족한 부분을 발견해서 좀 더 심도 있게 공부해 보기로 했습니다. 다음은 pseudo-class 부분을 요약한 것입니다. :link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。

伪类

 伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。具体有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。

HTMLAnchorElement的4大经典伪类

1. :link，用于设置链接初始状态时的样式;

2. :visited，用于设置链接被点击过后的样式;

3. :hover，用于设置鼠标悬停在链接上方时，链接的样式;

4. :active，用于设置鼠标按键按下，但未释放时，链接的样式。

 想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。

设置当前目标元素样式

 还记得URL中的井号吗？从井号(#)开始到URL的末尾称为URL的hash或fragment，用于定位页面内某项资源。假设现在页面存在<h3 id="Target">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。
它们分别是：

1. 鼠标点击;

2. Tab键;

3. 通过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]

其他

1. :root，用于设置元素的样式，从IE9开始支持。

2. :checked，用于设置单选和复选控件被选中的样式，从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。

3. :empty，用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素，而p{}则为没有子节点的元素。

4. :not，作为谓语表达取反的语义。

5. :placeholder-shown

   Pseudo-class

의사 클래스 선택기를 사용하면 기본적으로 디자이너는 요소의 특정 상태에 따라 다양한 시각적 효과를 설정할 수 있습니다. 구체적으로: :link, :visited, :hover, :active, :focus >, :focus-within, :target, :root 및 :checked.

HTMLAnchorElement의 4가지 고전 의사 클래스

1. :link, 사용됨 초기 상태의 링크 스타일을 설정합니다.

2. :visited, 클릭한 후 링크의 스타일을 설정하는 데 사용됩니다.
   

3. hover, 마우스를 링크 위로 가져갈 때 링크 스타일을 설정하는 데 사용됩니다.

4. :active, 마우스가 링크 위에 있을 때 링크 스타일을 설정하는 데 사용됩니다. 버튼을 눌렀지만 놓지 않았습니다. 🎜🎜🎜🎜 여러분이 가장 먼저 접한 것은 위의 네 가지 유사 카테고리였죠? ! 그리고 설정순서(LVAH)도 외워야겠네요, 하하. 🎜

   현재 대상 요소의 스타일 설정

   🎜 URL에 파운드 기호를 기억하시나요? 파운드 기호(#)부터 시작하여 URL 끝까지를 해시 또는 URL 조각이라고 하며 페이지에서 특정 리소스를 찾는 데 사용됩니다. #title이 입력되어 있는 한 현재 페이지에 <h3 id="Target">Target</h3> 요소가 있다고 가정합니다. 주소 표시줄에서 h3#title 요소가 시각적 영역의 특정 위치에 위치할 때까지 브라우저는 계속 스크롤합니다(스크롤에 트윈 애니메이션이 반드시 필요한 것은 아님). (참고: UI 라우팅과 혼동하지 마세요.) 🎜 위에서 언급한 위치 지정 페이지 리소스를 대상 요소 또는 현재 활성 요소라고 합니다! 스타일은 :target을 통해 설정할 수 있습니다. 🎜호환성: IE9에서 지원됩니다. 🎜🎜예: 🎜rrreee

   요소에 포커스가 있을 때 스타일 설정

   🎜:focus는 요소에 포커스가 있을 때 스타일을 설정하는 데 사용됩니다. 🎜호환성: IE8이 지원되기 시작합니다. 🎜그럼 어떤 요소가 포커스 상태를 지원하나요? 그런 다음 먼저 집중을 달성하기 위해 어떤 작업을 사용할 수 있는지 파악해야 합니다. 🎜그 내용은 다음과 같습니다: 🎜
   1. 🎜마우스 클릭;🎜🎜
   2. 🎜Tab 키;🎜🎜
   3. 🎜JavaScript의 HTMLElement.prototype을 통해( ) 메소드. 🎜🎜🎜🎜그러면 전통적으로 포커스 상태를 지원하는 요소는 a, button, input, select여야 합니다. 및 textareas.🎜HTML5에서 요소가 contenteditable 또는 tabindex 속성으로 설정된 경우 요소는 포커스 상태를 지원합니다. 🎜즉, 다음 선택자와 일치하는 요소는 포커스 상태를 지원합니다. 🎜rrreee🎜참고: tabindex 속성 값이 0보다 작은 경우 Tab 키를 통해 포커스를 얻을 수 없습니다. 그러나 요소는 마우스 클릭이나 스크립트를 통해 포커스를 얻을 수 있습니다. 🎜

      JS는 현재 포커스된 요소를 가져옵니다.

      rrreee🎜오해의 소지가 있는 속성도 있습니다🎜rrreee

      하위 요소가 포커스를 받을 때 요소의 스타일을 설정하세요

      🎜 :focus- 내에서, 하위 요소에 포커스가 있을 때 요소의 스타일을 설정하는 데 사용됩니다. 🎜호환성: Chrome63이 지원되기 시작합니다. 🎜🎜예: 두 번째로 비밀번호를 확인할 때 비밀번호 상자가 강조 표시됩니다.🎜rrreee

      Other

      1. 🎜:root, <code> 요소의 스타일을 설정하는 데 사용되며 IE9부터 지원됩니다. 🎜🎜
      2. 🎜:checked, 선택한 라디오 스타일을 설정하고 컨트롤을 확인하는 데 사용되며 IE9부터 지원됩니다. 의사 요소 ::before 및 content 속성을 ​​결합하면 유연하고 효율적인 맞춤형 라디오 및 검사 제어를 실현할 수 있습니다. 🎜🎜
      3. 🎜:empty, 하위 노드가 없는 요소의 스타일을 지정하는 데 사용됩니다. p{ }는 TEXT_NODE 하위 노드가 있는 요소이고, p{}는 하위 노드가 없는 요소입니다. 🎜🎜
      4. 🎜:not, 부정의 의미를 표현하는 술어. 🎜🎜
      5. 🎜:placeholder-shown, 요소 자리 표시자가 표시될 때 스타일을 설정하는 데 사용됩니다. 🎜🎜🎜🎜관련 권장 사항: 🎜🎜🎜CSS 의사 클래스 선택기🎜🎜🎜🎜🎜CSS 의사 클래스 선택기 정보_html/css_WEB-ITnose🎜🎜

위 내용은 CSS 의사 클래스 선택기에 대한 심층적인 이해(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!