CSS之:focus-within自身或某个后代focus的伪类

最新推荐文章于 2023-02-23 22:32:06 发布
最新推荐文章于 2023-02-23 22:32:06 发布
阅读量822 收藏 2
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/joyce_lcy/article/details/104481277
版权
本文介绍了CSS的`:focus-within`伪类，它用于选取自身或其后代元素拥有焦点的元素。在表单设计中，`:focus-within`非常实用。虽然IE浏览器不支持，但其他现代浏览器兼容良好。通过示例展示了当input元素获得焦点时，如何改变包含它的div样式及隐藏特定内容。
摘要由CSDN通过智能技术生成

1. 什么是:focus-within？

:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。

在表单中，这个伪类非常有用。

2. 兼容性

需要注意的是，IE不支持。
在这里插入图片描述

3. 例子

看下面这个例子，在input被选中的时候，隐藏*，并把整行变为灰色。
在这里插入图片描述
demo: https://jsfiddle.net/6epmr4u8/

<form>
  <<
最低0.47元/天 解锁文章
Joyce的前端日常
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS :focus-within的具体使用
12-13
CSS的世界真是一个神奇的世界。可能众多前端开发者听说过 :focus 并未听说过 :focus-within 。那么 :focus-within 是什么鬼。这篇文章，我们就说说 :focus-within 这个东东。 :focus-within是什么 在CSS中 :focus-within 是一个伪类，现在已经被列入到CSS选择器中（CSS Level 4 selector）。他就像你知道的 :focus 或者 :hover 。 :focus-within 能非常方便处理获取焦点状态。当元素本身或其后代元素获得焦点时， :focus-within 伪类的元素就会有效。 如果文字不好理解，咱们
浅谈css当中:focus-within的好玩之处
11-19
在CSS世界里，`:focus-within` 是一个非常有趣且实用的选择器，它允许我们针对一个元素及其所有子元素中的聚焦状态进行样式控制。在这个例子中，我们将探讨如何利用`:focus-within`来实现类似B站输入密码时遮住眼睛...
CSS 伪选择器 focus-within 介绍
高先生的猫
08-17 744
css中的:focus-within伪选择器可有点“不寻常”，尽管它的名称看上去很简单，而且相当直观。但它的解释是：选择一个包含具有:focus 的任何子元素的元素。有点绕是不是，但仔细读应该也能理解，下面通过具体的例子你就更能理解了。 form:focus-within { background: lightyellow; } 它是这样工作的： <form action="#"> <input type="text"> </form> 当fo..
221. 【CSS-选择器世界】-focus-within-实现无障碍访问的输入框
七镜的博客
02-23 194
整体聚焦伪类 :focus-within 非常实用，且兼容性不错，目前已经可以在实际项目中实用，包括移动端项目和无须兼容 IE 浏览器的桌面端项目。
focus-within switch tab
tianlaiit的博客
07-04 248
今天天来妹儿给大家分享的是使用 来实现 tab 切换功能。
神奇的选择器 :focus-within
weixin_34033624的博客
08-02 91
CSS 的伪类选择器和伪元素选择器，让 CSS 有了更为强大的功能。 伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 有个错误有必要每次讲到伪类都提一下，有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持下面这两种表示方式。 通常而言， #i...
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
09-25
css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助
focus-within-polyfill:具有检测功能的小型香草javascript
05-01
CSS伪类中的:focus-within表示已获得焦点的元素，或包含已获得焦点的元素。 换句话说，它表示元素本身与：focus伪类匹配，或具有与:focus匹配的后代（这包括影子树中的后代）。 举一个常见的例子，当用户将焦点...
新CSS伪类：focus-within
weixin_33748818的博客
05-17 205
原文链接：点击这里 ，本文根据此文总结而来。 偶然间发现新的CSS伪类:focus-within，能非常方便处理获取焦点状态。 当元素本身或其后代获得焦点时，:focus-within伪类的元素就会有效。 没看懂，可以看下面的例子： &lt;div class="container" tabindex="0"&gt; &lt;label for="text"&gt;Enter text&...
css中hideFocus的用法
weixin_33859665的博客
09-26 236
css中hideFocus的用法简单说：hideFocus是对超链接外虚线框的设定！ hideFocus即隐藏聚焦，具有使对象聚焦失效的功能，其功能相当于： onFocus="this.blur()" 它的值是一个布尔值，如hideFocus=true。也可省略赋值直接写hideFocus。 你给的代码如果没有hideFocus,那么鼠标点击该超链接，则外面出现一个虚线框，即为聚焦。而使用了...
css里面获得焦点什么意思,浅谈css当中:focus-within的好玩之处
weixin_39946029的博客
08-03 328
相信有些人看到过这个B站输入密码就遮眼睛的这个图这里我们用:focus-within玩一把布局是这样的外面有一个ctn 可以忽略，就是一个居中固定位置而已xPassword在没点击之前里面的“suo”这个图是隐藏的xPassword 同级屁股后的“r6m”此时是显示的当我们一点击xPassword后同级第一张图‘r6m’隐藏:focus-within ~ img的 ~ 这个符号是同级屁股后第一个的...
focus-within伪类~
Nanyuey的博客
04-24 431
一般像:focus :hover这些伪类除了对自身元素改变样式外，还能够对其他元素改变样式；1.a:hover&gt;b{ xxx} ;这样对父元素a进行hover  子元素会发生改变；2.a:hover+b{xxx}；对a元素进行hover ，其紧跟随的兄弟元素发生改变；3.a：hover~b{xxx}；对a元素进行hover，其同级的所有b兄弟元素发生改变；注：这些选择器都是针对与后代元素或者...
HTML元素、核心属性
qq_46495738的博客
09-12 647
- HTML元素 块级元素(block elements) 独占一行空间，用来布局段落,不要将块级元素嵌套在行内元素中。 可以指定宽高。 块级元素有： div、h1~h6 、p、ol、ul、dl、form、table 行内元素(inline elements) 与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现。 不可以指定宽高。 行内元素有：span 、a、s、i、b、strong 块级元素与行内元素可以使用display进行切换： display:inline; 行内显
css hover, focus 状态改变其他元素样式
在下爱编程的博客
03-08 2832
css 当中如何实现一个元素的hover, focus 状态改变其他元素的样式 A:hover { 改变 B 的样式 }， 这样效果就不需要用到javascript。 这个就是css选择器的使用情况了，假设悬浮元素是a，样式改变元素是b,俩个元素之间的关系就是b是a的子元素就可以使用 a:hover>b{…}。 还有就是b刚好是a的同级元素并且是紧接着的，就可以a:hover+b{…}还有就是b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{…}还有就自己去看吧。 ...
CSS :focus使用
fly
04-11 4008
获取焦点时 ， 通常用于input，修改样式！
element-ui Select选择器边框闪烁问题 及 :focus-within伪类
热门推荐
Leayh
06-12 1万+
背景 在提分加项目中用到了element-ui的select组件，发现第一次进入页面点击选择器时会有一个边框闪烁，后审查元素时发现了:focus-within的伪类。 解决 .select-box span:focus-within { border: none; outline: none; } 其中，.select-box是我给select组件取的类名，添加完以上样式后，边...
css伪类focus-within
最新发布
07-28
:focus-within是一个CSS伪类，用于选择器匹配其内部有焦点的元素的父元素。当父元素的子元素获得焦点时，可以使用:focus-within来样式化父元素本身。\[2\]在引用\[1\]中的示例中，当.field类的div的后代元素input被focus时，div的背景颜色会变为#f0f0f0，而伪类::after中的*将不会显示。\[1\]而在引用\[2\]中的示例中，当.my-element类的div的子元素获得焦点时，div本身会出现一个3px的红色边框。\[2\]\[3\]所以:focus-within可以用来样式化父元素，当其内部的子元素获得焦点时。 #### 引用[.reference_title] - *1* [CSS之:focus-within自身或某个后代focus的伪类](https://blog.csdn.net/joyce_lcy/article/details/104481277)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [CSS里：focus-within 的作用和用法](https://blog.csdn.net/i042416/article/details/109618129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值