神奇的选择器 :focus-within
CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能。
伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的。
有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类和伪元素,大多数浏览器都支持下面这两种表示方式。
通常而言,
#id:after{
...
} #id::after{
...
}
符合标准而言,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素。
当然,也有例外,对于 CSS2 中已经有的伪元素,例如 :before,单冒号和双冒号的写法 ::before 作用是一样的。
所以,如果你的网站只需要兼容 webkit、firefox、opera 等浏览器或者是移动端页面,建议对于伪元素采用双冒号的写法,如果不得不兼容低版本 IE 浏览器,还是用 CSS2 的单冒号写法比较安全。
伪类选择器 :focus-within
言归正传,今天要说的就是:focus-within
伪类选择器。
它表示一个元素获得焦点,或,该元素的后代元素获得焦点。划重点,它或它的后代获得焦点。
这也就意味着,它或它的后代获得焦点,都可以触发 :focus-within
。
:focus-within
的冒泡性
这个属性有点类似 Javascript 的事件冒泡,从可获焦元素开始一直冒泡到根元素 html
,都可以接收触发 :focus-within
事件,类似下面这个简单的例子这样:
<div class="g-father">
<div class="g-children">
<input type="button" value="Button">
</div>
</div>
html,
body,
.g-father,
.g-children {
padding: 30px;
border:1px solid #999;
} input {
...
&:focus {
background: #00bcd4;
}
} html:focus-within {
background: #e91e63;
}
body:focus-within {
background: #ff5722;
}
.g-father:focus-within {
background: #ffeb3b;
}
.g-children:focus-within {
background: #4caf50;
}
就是这样:
CodePen Demo -- :focus-within 冒泡触发
这个选择器的存在,让 CSS 有了进一步的让元素持久停留在一种新状态的的能力。
下面几个例子,看看 :focus-within
可以提供什么能力,做些什么事情。
感应用户聚焦区域
它或它的后代获得焦点,这一点使得让感知获焦区域变得更大,所以,最常规的用法就是使用 :focus-within
感应用户操作聚焦区域,高亮提醒。
下面的效果没有任何 JS 代码:
这里是什么意思呢?:focus-within
做了什么呢?
- 我们无须去给获焦的元素设置
:focus
伪类,而是可以给需要的父元素设置,这样当元素获焦时,我可以一并控制它的父元素的样式
核心思想用 CSS 代码表达出来大概是这样:
<div class="g-container">
<div class="g-username">
<input type="text" placeholder="user name" class="g_input" >
</div>
<div class="g-username">
<input type="text" placeholder="code" class="g_input" >
</div>
</div>
.g-container:focus-within {
... input {
....
}
}
DEMO -- CSS focus-within INPUT
运用上面思想,我们可以把效果做的更炫一点点,在某些场景制作一些增强用户体验的效果:
DEMO -- PURE CSS FOCUS By :focus-within
TAB导航切换
在之前的一篇文章里,介绍了两种纯 CSS 实现的 TAB 导航栏切换方法:
现在又多了一种方式,利用了 :focus-within
可以在父节点获取元素获得焦点的特性,实现的TAB导航切换:
DEMO -- focus-within switch tab
主要的思路就是通过获焦态来控制其他选择器,以及最重要的是利用了父级的 :not(:focus-within)
来设置默认样式:
.nav-box:not(:focus-within) {
// 默认样式
} .nav-A:focus-within ~ .content-box .content-A {
display: block;
} .nav-B:focus-within ~ .content-box .content-B {
display: block;
}
配合 :placeholder-shown
伪类实现表单效果
:focus-within
一个人能力有限,通常也会配合其他伪类实现一些不错的效果。这里要再简单介绍的是另外一个有意思的伪类 :placeholder-shown
。
:placeholder-shown
:The :placeholder-shown CSS pseudo-class represents any or <textarea> element that is currently displaying placeholder text.
另外,划重点,这个伪类是仍处于实验室的方案。也就是未纳入标准,当然我们的目的是探寻有意思的 CSS 。
意思大概就是,当 input
类型标签使用了 placeholder 属性有了默认占位的文字,会触发此伪类样式。配合:not()
伪类,可以再改变当默认文字消失后的样式,再配合本文的主角,我们可以实现表单的一系列效果。
CSS 代码大概呈现成这样:
.g-container {
width: 500px;
height: 60px; input {
height: 100%;
width: 100%; &:not(:placeholder-shown) {
...
} &:placeholder-shown {
...
}
} &:focus-within {
...
}
}
实际效果如下:
可以看到,上面的效果没有用到任何 JS,可以实现:
- 整个 input(包括父元素所在区域)获焦与非获焦样式控制
- placeholder 属性设置的文字出现与消失后样式控制
CodePen Demo -- :placeholder-shown && :focus-within
实现离屏导航
这个是其他很多文章都有提到过的一个功能,利用 focus-within
便捷的实现离屏导航,可以说将这个属性的功能发挥的淋漓尽致,这里我直接贴一个 codepen 上 Dannie Vinther 对这个效果的实现方案:
CodePen Demo -- Off-screen nav with :focus-within [PURE CSS]
实现掘金登录动效切换
juejin.im是我很喜欢的一个博客网站,它的登录有一个小彩蛋,最上面的熊猫在你输入帐号密码的时候会有不同的状态,效果如下:
利用本文所讲的 focus-within
,可以不借助任何 Javascript,实现这个动效:
感兴趣的可以戳这里看看完整的Demo代码:
兼容性
好了,例子举例的也差不多了,下面到了杀人诛心的兼容性时刻,按照惯例,这种属性大概率是一片红色,看看 CANIUSE,截图日期(2018/08/02),其实也还不算特别惨淡。
最后
感谢耐心读完。本文只是抛砖引玉,期待发掘 focus-within
更多有意义的用法。
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
神奇的选择器 :focus-within的更多相关文章
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- jQuery 一些神奇的选择器写法
======================================================================== =========================== ...
- 02.CSS选择器-->:focus
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- 使用 tabindex 配合 focus-within 巧妙实现父选择器
本文将介绍一个不太实用的小技巧,使用 tabindex 配合 :focus-within 巧妙实现父选择器. CSS 中是否存在父选择器? 这是一个非常经典的问题,到目前为止,CSS 没有真正意义上被 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当 ...
- JQ基础之选择器
JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $ ...
- CSS选择器渲染效率
1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...
随机推荐
- React-----input中的value不更新 - 提问
原文:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
- Python 字符串大小写转换
以下代码演示了如何将字符串转换为大写字母,或者将字符串转为小写字母等: # Filename : test.py # author by : www.runoob.com str = "ww ...
- linux 显示当前所在文件位置 以及git 分支所在
function git-branch-name { git symbolic-ref HEAD 2>/dev/null | cut -d"/" -f 3}function ...
- 关于Kafka日志留存策略的讨论
关于Kafka日志留存(log retention)策略的介绍,网上已有很多文章.不过目前其策略已然发生了一些变化,故本文针对较新版本的Kafka做一次统一的讨论.如果没有显式说明,本文一律以Kafk ...
- ArrayBlockingQueue简介
ArrayBlockingQueue基于数组,先进先出,从尾部插入到队列,从头部开始返回. 线程安全的有序阻塞队列,内部通过"互斥锁"保护竞争资源. 指定时间的阻塞读写 容量可限制 ...
- bzoj 2820 莫比乌斯反演
搞了一整个晚自习,只是看懂了dalao们的博客,目前感觉没有思路-.还是要多切题 next day: 刚才又推了一遍,发现顺过来了,hahaha #include<cstdio> #inc ...
- BZOJ_2661_[BeiJing wc2012]连连看_费用流
BZOJ_2661_[BeiJing wc2012]连连看_费用流 Description 凡是考智商的题里面总会有这么一种消除游戏.不过现在面对的这关连连看可不是QQ游戏里那种考眼力的游戏.我们的规 ...
- xshell 快速复制打开之前用过的ssh
有时候需要对一个ip地址的服务器进行多个操作,不在一个会话中,需要新建多个同样的会话 然后左键单击+号 出现一个新的会话 然后再右键单击+号 选择之前保存过的ip地址即可快速创建!
- 基于SpringBoot从零构建博客网站 - 确定需求和表结构
要确定一个系统的需求,首先需要明确该系统的用户有哪些,然后针对每一类用户,确定其需求.对于博客网站来说,用户有3大类,分别是: 作者,也即是注册用户 游客,也即非注册用户 管理员,网站维护人员 那么从 ...
- Java相关面试题总结
本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...