您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
小编今天带大家了解CSS伪类选择器的用法是什么，文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容，希望能够帮助更多想解决这个问题的朋友找到问题的答案，下面跟着小编一起深入学习“CSS伪类选择器的用法是什么”的知识吧。
前言
过去零零星星地了解和使用: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，用于定位页面内某项资源。假设现在页面存在<h4id="title">Target</h4>的元素，那么只要地址栏输入#title浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h4#title位于可视区的特定位置。（注意：请不要和UIRouting混为一谈）
而上述这个被定位的页面资源，被称为目标元素或当前活动元素！可通过:target设置其样式。
兼容性：IE9开始支持。
示例：
//当前URL为http://foo.com#1
:target{
color:red;
}
.title{
color:blue;
&:target{
border:solid1pxred;
}
}
.title{I'mnottargetelement.}
.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:solid1pxskyblue;
}
&:not(:focus){
border:solid1pxorange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]其他
:root，用于设置<html>元素的样式，从IE9开始支持。
:checked，用于设置单选和复选控件被选中的样式，从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。
:empty，用于设置没有子节点的元素的样式。p{}为存在TEXT_NODE子节点的元素，而p{}则为没有子节点的元素。
:not，作为谓语表达取反的语义。
:placeholder-shown，用于设置元素placeholder显示时的样式。
css的基本语法是：1、css规则由选择器和一条或多条声明两个部分构成；2、选择器通常是需要改变样式的HTML元素；3、每条声明由一个属性和一个值组成；4、属性和属性值被冒号分隔开。
感谢大家的阅读，以上就是“CSS伪类选择器的用法是什么”的全部内容了，学会的朋友赶紧操作起来吧。相信亿速云小编一定会给大家带来更优质的文章。谢谢大家对亿速云网站的支持！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。