深入了解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,用于定位页面内某项资源。假设现在页面存在
Target
的元素,那么只要地址栏输入#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。
它们分别是:
鼠标点击;
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: solid 1px skyblue; } &:not(:focus){ border: solid 1px orange; } } } .form-control>input.pwd[type=password]+input.confirm-pwd[type=password]
其他
:root,用于设置元素的样式,从IE9开始支持。
:checked,用于设置单选和复选控件被选中的样式,从IE9开始支持。结合伪元素::before和content属性可以实现灵活高效的自定义单选和复选控件。
:empty,用于设置没有子节点的元素的样式。p{ }为存在TEXT_NODE子节点的元素,而p{}则为没有子节点的元素。
:not,作为谓语表达取反的语义。
:placeholder-shown,用于设置元素placeholder显示时的样式。
以上是深入了解CSS伪类选择器的用法(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

CSS中的:hover是一种伪类选择器,用于在用户悬停在特定元素上时,应用特定的样式。当鼠标悬停在元素上时,可以通过:hover为其添加不同的样式,从而增强用户体验和交互效果。本文将详细讨论:hover的含义以及给出具体的代码示例。首先,让我们了解一下CSS中:hover的基本用法。在CSS中,可以通过选择器来选中要应用:hover效果的元素,并在其后面加上

CSS中去除li标签圆点的方法有两种:1.使用"list-style-type: none;"样式;2.使用透明图片和"list-style-image: url("transparent.png");"样式。两种方法都能删除所有li标签的圆点,如果您只想删除某些li标签的圆点,可以使用伪类选择器。

如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中,伪类选择器是一种强大的工具,可以通过特定的选择方式来选取HTML文档中的某些元素。其中,:nth-child()是一种常用的伪类选择器,可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素,而:nth-child(-n)可以匹配

CSS中content属性的用法CSS中的content属性是一个非常有用的属性,它是用来在伪类中插入额外的内容的。content属性一般只能在伪类选择器(如::before和::after)中使用,它可以用来插入文本或者图片等内容。我们可以通过content属性实现一些非常炫酷的效果。下面是content属性的一些用法以及具体的代码示例:插入文本内容通过

CSS中的hover伪类是一个非常常用的选择器,它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法,并提供具体的代码示例。一、基本用法要使用hover,我们需要先为该元素定义一个样式,然后使用:hover伪类来制定鼠标悬停时对应的样式。例如,我们有一个button元素,当鼠标悬停在按钮上时,我们希望按钮的背景色变为红色,文字颜色变为白

使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式,需要具体代码示例在CSS中,伪类选择器是一种非常强大的工具,可以用来选择文档树中特定的元素。其中之一就是:nth-last-child(2)伪类选择器,它可以选择倒数第二个子元素并对其应用样式。首先,让我们来创建一个示例HTML文档,以便我们可以在其中使用这个伪类选择器。以

CSS3选择器有多种类型,它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型,并提供具体的代码示例。基本选择器:元素选择器:使用元素名称作为选择器,此处以p元素为例:p{color:red;}类选择器:使用类名作为选择器,以.开头,此处以class为example的元素为例:.example{fo
