CSS学习 神奇的选择器 :focus-within

  • 时间:2018-08-02 22:11 作者:会技术的葛大爷 来源:会技术的葛大爷 阅读:270
  • 扫一扫,手机访问
摘要:CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了

CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。

伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。

通常而言,

CSS学习 神奇的选择器 :focus-within

符合标准而言,单冒号(:)使用于 CSS3 伪类,双冒号(::)使用于 CSS3 伪元素。

当然,也有例外,对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作使用是一样的。

所以,假如你的网站只要要兼容 webkit、firefox、opera 等浏览器或者者是手机端页面,建议对于伪元素采使用双冒号的写法,假如不得不兼容低版本 IE 浏览器,还是使用 CSS2 的单冒号写法比较安全。

伪类选择器 :focus-within

言归正传,今天要说的就是:focus-within 伪类选择器。

它表示一个元素取得焦点,或者,该元素的后代元素取得焦点。划重点,它或者它的后代取得焦点。

这也就意味着,它或者它的后代取得焦点,都可以触发 :focus-within。

:focus-within 的冒泡性

这个属性有点相似 Javascript 的事件冒泡,从可获焦元素开始一直冒泡到根元素 html,都可以接收触发 :focus-within 事件,相似下面这个简单的例子这样:

CSS学习 神奇的选择器 :focus-within

就是这样:

CSS学习 神奇的选择器 :focus-within

这个选择器的存在,让 CSS 有了进一步的让元素持久停留在一种新状态的的能力。

下面几个例子,看看 :focus-within 可以提供什么能力,做些什么事情。

感应使用户聚焦区域

它或者它的后代取得焦点,这一点使得让感知获焦区域变得更大,所以,最常规的使用法就是用 :focus-within 感应使用户操作聚焦区域,高亮提示。

下面的效果没有任何 JS 代码:

CSS学习 神奇的选择器 :focus-within

这里是什么意思呢?:focus-within 做了什么呢?

  • 我们毋庸去给获焦的元素设置 :focus 伪类,而是可以给需要的父元素设置,这样当元素获焦时,我可以一并控制它的父元素的样式

核心思想使用 CSS 代码表达出来大概是这样:

CSS学习 神奇的选择器 :focus-within

运使用上面思想,我们可以把效果做的更炫一点点,在某些场景制作少量加强使用户体验的效果:

CSS学习 神奇的选择器 :focus-within

TAB导航切换

在之前的一篇文章里,详情了两种纯 CSS 实现的 TAB 导航栏切换方法:

纯CSS的导航栏Tab切换方案

现在又多了一种方式,利使用了 :focus-within 可以在父节点获取元素取得焦点的特性,实现的TAB导航切换:

CSS学习 神奇的选择器 :focus-within

主要的思路就是通过获焦态来控制其余选择器,以及最重要的是利使用了父级的 :not(:focus-within) 来设置默认样式:

CSS学习 神奇的选择器 :focus-within

配合 :placeholder-shown 伪类实现表单效果

:focus-within 一个人能力有限,通常也会配合其余伪类实现少量不错的效果。这里要再简单详情的是另外一个有意思的伪类 :placeholder-shown。

  • :placeholder-shown:The :placeholder-shown CSS pseudo-class represents any or
  • [展开所有评论]
最新发布的资讯信息
【系统环境|windows】Axios 取消重复请求(2020-11-08 07:00)
【系统环境|windows】熬了一晚上,小白用Python写了一个股票提示系统(2020-11-08 07:00)
【系统环境|windows】2020要想成为一名专业的web前台开发程序员,需要学习什么?(2020-11-08 06:35)
【系统环境|windows】前台面试每日 3+1 —— 第546天(2020-11-08 06:34)
【系统环境|windows】聊聊前台工程师的职业发展 (纯干货)(2020-11-08 06:34)
【系统环境|windows】浅谈OAuth 2.0基本原理(2020-11-08 06:34)
【系统环境|windows】程序员初入职场避坑指南(2020-11-08 06:34)
【系统环境|windows】python的绘图利器--海龟绘图turtle(2020-11-08 06:33)
【系统环境|windows】pyinstaller打包结果瘦身(2020-11-08 06:33)
【系统环境|windows】前台面试每日 3+1 —— 第518天(2020-11-08 06:33)