html伪类选择器focus,了解CSS :focus-within伪类选择器
一、了解CSS :focus-within伪类选择器
CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲，区别在于:focus表示当前元素处于focus状态时候干嘛干嘛，而:focus-within表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。
举个例子：
form:focus {
outline: solid;
}
表示仅仅当
处于focus状态时候，元素outline出现。
form:focus-within {
outline: solid;
}
表示
元素自身，或者内部的子元素处于focus状态时候，元素outline出现。换句话说，子元素focus，可以让任意父级元素样式发生变化。
这个新特性的支持，未来势必会带来更加丰富的交互形式，以及特定场景简化我们实现。
兼容性
兼容性如下截图：
还是挺喜人的。
二、CSS :focus-within伪类选择器实际应用举例
1. 表单输入勿扰模式
当我们表单输入，选择或者进行交互时候，页面上表单以为其他内容全部都不可见。
CSS代码如下：
form {
outline: 2000px solid hsla(0,0%,100%,0);
transition: outline .2s;
position: relative;
z-index: 1;
}
form:focus-within {
outline: 2000px solid hsla(0,0%,100%,1);
}
效果如下截屏gif：
本案例是真实的勿扰模式效果可以放心大胆在实际项目中使用，因为这是一个体验增强的交互，就算浏览器不支持，对原本功能也不会有任何影响。
2. 带计数文本域的focus高亮
对于带计数的组件化的多行文本域，计数的数值通常是设计在文本域的右下角，这样能够适应各种复杂的场景。如下截图：
然而这种设计对我们的布局实现带来的挑战。
我们通常想到的方法是，计数元素浮在下面的textarea元素上。然而这种时间存在有致命的不足，那就是输入框的内容有可能和我们的计数重叠，以及出现的滚动条和技术文本重叠，如下截图所示：
因此，我们通常做法就是：边框使用父级
假设HTML如下：
0/250
则核心CSS这样：
/* 父级div元素模拟边框 */
.textarea-x {
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
}
/* 文本域原本的边框去除 */
.textarea-x > textarea {
border: 0;
background: none;
}
然而上面的实现有个非常严重的不足，那就是元素:focus时候，边框无法高亮，因为CSS中没有父选择器！
因此，实际开发的时候，我们会使用相邻兄弟选择器，以及新建一个兄弟元素来模拟边框。
HTML结构如下：
0/250
原理如下图示意：
对应的核心CSS代码如下：
.textarea-x {
position: relative;
z-index: 0;
}
.textarea-x > textarea {
border: 0;
background: none;
outline: 0;
resize: none;
position: relative;
}
.textarea-x > .textarea {
position: absolute;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
}
.textarea-x > :focus + .textarea {
border-color: #00a5e0;
}
由于.textarea元素和原生的元素是相邻兄弟关系，因此我们可以借助相邻兄弟选择器，让元素focus时候后面用来模拟边框的.textarea元素高亮。也就是这么一段CSS代码：
.textarea-x > :focus + .textarea {
border-color: #00a5e0;
}
这种实现兼容IE7+浏览器。下图为实现后的效果截图：
当然涉及到具体代码，还是有很多细节需要注意的，您可以狠狠地点击这里：利用相邻兄弟选择器模拟带计数文本域:focus效果demo
但是，现在有了CSS :focus-within伪类选择器，我们的事情就简单多了。
还是开始提到的父级
.textarea-x:focus-within {
border-color: #00a5e0;
}
就是这么简单。
focus时候效果如下截图：
三、:focus-within更多思路、更棒案例和结束语
:focus-within伪类原本设计的作用是原生表单元素focus时候，祖先
元素可以也有状态变化。
但是在我看来，:focus-within功能之强悍，远远不是仅仅和祖先
元素玩过家家这么简单。
理论上，只要页面上任意一个元素focus，通过:focus-within就能对页面上任意的元素进行样式控制。
例如：
html:focus-within xxx {
/*xxx跑得了吗？跑不了*/
}
我想到的有：
相邻选择器，加号，或者弯弯都只能选择后面的元素，但是，有了:focus-within，我们就可以对前面元素进行控制，虽然只能在:focus行为场景下。例如请重复输入密码时候，让上面的输入密码框也高亮。
基于纯CSS和focus行为实现下拉列表的交互成为了可能。只要把按钮和下拉元素放在一个容器中，就可以了。
点击“我的消息”，就会出现下拉列表；此时点击下拉列表里面的条目，下拉元素也一直显示(因为列表是可focus的元素)。只有点击页面空白元素或其他位置，下拉列表才会隐藏。完全符合实际项目开发的下拉列表交互需求。
交互效果如下GIF截屏所示：
核心代码如下：
我的消息
我的回答12
我的私信
未评价订单2
我的关注
.box {
display: none;
}
.details:focus-within .summary {
background-color: #fff;
}
.details:focus-within .box {
display: block;
}
html伪类选择器focus,了解CSS :focus-within伪类选择器相关推荐
- html并集选择器怎么写,css案例学习之并集选择器
代码 并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
- html中选择样式,html中css三种常见的样式选择器 zz
1:标签选择器 标签选择器,是所有带有某种标签的都生效.这里以p为例,也就是所有的带有p标记的都会这样的样式 p{font:"宋体"; color:#FF0000} 我现在表现的是 ...
- css 选父元素,CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
- 【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有 元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
- 【第四篇】CSS选择器之伪类选择器
利用组合选择器虽然可以选择子类和兄弟元素,但是无法做到特殊的选择.例如无法选择第几个子类,或者和其同标签的兄弟元素.为此CSS诞生了伪类选择器,用来进行更加灵活的元素选择. 伪类选择器 伪类选择器根据 ...
- CSS :before :after 伪类选择器
CSS :before :after 伪类选择器 所有主流浏览器都支持 :after 选择器. 注释:对于 IE8 及更早版本中的 :after,必须声明 <!DOCTYPE>. :bef ...
- 前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结 锚伪类选择器:hover,:active,:visited;等用法总结 一.什么是锚伪类 在支持 CSS 的浏览器 ...
- CSS内嵌样式的选择器（包括 id选择器、类class选择器、选择器伪元素、伪类）
CSS内嵌样式的选择器是通过使用style标签写在head里的 选择器一共有9种: 1.标签选择器:是指通过元素的标签名字来选中元素 从而设置样式 语法结构:元素标签名{属性:属性值;属性:属性值} ...
最新文章
- Python的scrapy之爬取顶点小说网的所有小说
- 线性回归、二次回归、随机采样一致性ransac的数据拟合
- 【jQuery】jQ处理xml文件和xml字符串
- 混合效应模型和广义线性模型计算R方的函数sem.model.fits
- input文本框隐藏边框
- android 合并两个图片大小,Android开始之将两张图片合并为一张图片的方法
- nginx 安装和使用godaddy颁发证书
- 网络安全意识 | 以人为本，安全意识工作大有可为
- js实现扫雷-算法分析
- Kafka Message Dilivery Semantics
- 《东周列国志》第一回 周宣王闻谣轻杀 杜大夫化厉鸣冤
- Kubernetes——service管理
- ETIMEDOU 104.16.20.35:443（已解决）
- 基于kmeans聚类算法的微博舆情热点事件分析系统
- 初学编程，放弃C++而选择C语言，究竟选对了还是选错了？
- 云享团——基于大数据开发套件的增量同步策略
- 爬虫中常见的状态响应码
- python替换图片背景色，适用于制作证件照
- 超简单的配置java环境变量（绝对路径）
- Android 代码 空格处理