CSS魔法堂：稍稍深刻伪类选择器

时间 2019-11-05

标签 css 稍稍深刻选择器栏目 CSS 繁體版

原文原文链接

前言

过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，因而决定稍微深刻学习一下，如下为伪类部分的整理。css

伪类

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

`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开始支持。wordpress

示例：学习

// 当前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。
它们分别是：prototype

鼠标点击;
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键得到焦点。但能够经过鼠标点击或脚本时元素得到焦点。code

JS获取当前获得焦点的元素

/* 
 * 加载完成时默认返回body
 * 若某元素得到焦点时，则返回该元素
 */
document.activeElement :: HTMLElement

另外还有一个让人误会的属性orm

// 用于检测文档是否获得焦点，即用户是否正在与页面交互
// 页面仅仅位于屏幕可视区域，而用户没有与之交互时返回false。
document.hasFocus :: Void -> Boolean

设置子元素得到焦点时，该元素的样式

:focus-within，用于设置当子元素处于focus状态时，该元素的样式。
兼容性:Chrome63开始支持。htm

示例：二次确认密码时，密码框高亮

.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，用于设置没有子节点的元素的样式。div{ }为存在TEXT_NODE子节点的元素，而div{}则为没有子节点的元素。
:not，做为谓语表达取反的语义。
:placeholder-shown，用于设置元素placeholder显示时的样式。

总结

尊重原创，转载请注明来自：http://www.javashuo.com/article/p-vmmnogyl-t.html ^_^肥仔John

参考

https://css-tricks.com/almanac/selectors/f/focus/
https://www.zhangxinxu.com/wordpress/2018/01/css-focus-within-pseudo-class-selector

1. css--css选择器，伪类
2. css选择器-伪类选择器
3. css选择器2——伪类选择器
4. CSS伪类选择器
5. css伪类选择器
6. 5.CSS 伪类选择器
7. CSS 3 伪类选择器
8. CSS 伪类选择器
9. css 伪类选择器
10. 选择器、伪类、伪类选择器
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• XQuery 选择和过滤 - XQuery 教程
• 算法总结-深度优先算法
• Kotlin学习（二）基本类型