CSS伪类选择器的知识有哪些

这篇“CSS伪类选择器的知识有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS伪类选择器的知识有哪些”文章吧。

站在用户的角度思考问题,与客户深入沟通,找到渝中网站设计与渝中网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请雅安服务器托管、企业邮箱。业务覆盖渝中地区。

伪类

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

HTMLAnchorElement的4大经典伪类

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

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

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

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

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

设置当前目标元素样式

&emsp;还记得URL中的井号吗?从井号(#)开始到URL的末尾称为URL的hash或fragment,用于定位页面内某项资源。假设现在页面存在<h4id="title">Target</h4>的元素,那么只要地址栏输入#title浏览器就会不断滚动(滚动不一定存在补间动效)直到元素h4#title位于可视区的特定位置。(注意:请不要和UIRouting混为一谈)

&emsp;而上述这个被定位的页面资源,被称为目标元素或当前活动元素!可通过:target设置其样式。

&emsp;兼容性: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伪类选择器的知识有哪些

以上就是关于“CSS伪类选择器的知识有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。

分享文章:CSS伪类选择器的知识有哪些
链接分享:https://www.cdcxhl.com/article28/ihsicp.html

成都网站建设公司_创新互联,为您提供网站排名关键词优化网站设计公司品牌网站建设网站设计搜索引擎优化

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站托管运营