高防服务器

CSS伪类选择器的用法是什么


CSS伪类选择器的用法是什么

发布时间:2022-01-19 17:55:02 来源:高防服务器网 阅读:62 作者:柒染 栏目:web开发

小编今天带大家了解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的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

感谢大家的阅读,以上就是“CSS伪类选择器的用法是什么”的全部内容了,学会的朋友赶紧操作起来吧。相信高防服务器网小编一定会给大家带来更优质的文章。谢谢大家对高防服务器网网站的支持!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[