CSS:伪类选择器focus

最新推荐文章于 2024-06-04 09:30:59 发布
最新推荐文章于 2024-06-04 09:30:59 发布
阅读量411 收藏 3
点赞数 6
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45609811/article/details/101040887
版权
本文介绍了CSS中的:focus伪类选择器，该选择器用于当元素获得屏幕焦点（如通过鼠标点击或键盘导航）时应用样式。文章通过示例展示了如何为文本框添加焦点时的阴影效果，帮助读者理解:focus的用法。
摘要由CSDN通过智能技术生成

focus------焦点
当我们鼠标点击谁，谁就是当时屏幕的焦点啦

下图是一个文本框，我们还没有点击它的时候
在这里插入图片描述
现在我们点它一下，它就有了阴影
在这里插入图片描述
下面看一下代码

<input class="get" type="test">
最低0.47元/天 解锁文章
张卡卡mg
关注
专栏目录
focus伪类选择器
WangZhang_521的博客
12-24 393
focus伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
html伪类选择器focus,了解CSS :focus-within伪类选择器
weixin_32344641的博客
06-03 971
一、了解CSS :focus-within伪类选择器CSS:focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲，区别在于:focus表示当前元素处于focus状态时候干嘛干嘛，而:focus-within表示当前元素或者当前元素的子元素处于focus状态时候干嘛干嘛。举个例子：form:focus {outline: solid;}表示仅仅当处于focus状态时候，元...
复合选择器之：focus伪类选择器
weixin_47481102的博客
04-25 670
:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。 input：focus{ background-color: yellow; } 练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equi
CSS的:focus伪类选择器
听海边涛声
06-04 380
CSS的:focus伪类选择器
：focus伪类选择器
m0_67545415的博客
09-11 149
1
CSS中的focus-within伪类选择器
Dear_Mr的博客
01-22 1125
:focus-within很容易让人联想到focus，区别就在于focus是对于当前元素，而:focus-within则是对于当前对象和当前对象子元素 MDN: The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has re
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
CSS伪类全解析：深入探索选择器的隐藏力量
最新发布
07-24
**CSS（层叠样式表）**是构建网页视觉表现的核心语言，而**伪类**是CSS选择器中的一种强大工具，它允许开发者根据文档之外的条件来应用样式。伪类通常用于创建动态效果，比如鼠标悬停、表单元素的状态，或是内容的...
CSS复合选择器 后代选择器 a:链接伪类选择器 focus:伪类选择器
ahang的博客
03-18 211
后代选择器 <!-- 后代选择器 选择器中间一个空格再写一个选择器 元素1 元素2 {样式声明} ul li {样式声明} --> <style> ul li { color: coral; } ol li a { color: yellow; } .nav li a { color: green; } </style> <body> <u.
1、7focus伪类选择器
qq_62865634的博客
08-21 385
本文仅仅简单介绍了focus伪类选择器用于焦点元素，焦点就是光标，一般情况下类表单元素。
XML解析库 lxml 教程(一)
jianghuixin
10-23 1213
Element 类 本系列文章主要讲解如何使用lxml解析 XML, 本篇和下一篇文章主要介绍Element对象的操作, 由于 HTML 是 XML 的子集, 所以本篇内容同样适用于 HTML 工厂函数 在 XML 中每一处尖括号代表着一个标签或者元素, lxml 库为了方便操作, 封装了 Element类, 通过 Element 可以很方便地操作 XML 树 创建 Element 对象 from lxml import etree # 创建根元素 root = etree.Element("root")
伪类选择器focus使用
Anoddguy的博客
07-05 1691
W3C定义：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。简单来说就是支持input标签。可以在CSS中采用input:focus{}进行操作。如下是简单例子&lt;div class="outer"&gt;&lt;input type="text" name="" id="" value="" /&gt;&lt;/div&gt;&lt;
[css3] focus伪类选择器-获得焦点元素
qq_49900295的博客
03-16 1292
:focus伪类选择器用于选取获得焦点的元素，这里我们主要针对的是表单元素 我们新建了一个非常简单的文本框，我想在我们的光标定到这的时候让边变成蓝色并且文本框变长，应该怎么做？ 代码示例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-sc
CSS的复合选择器（后代选择器、子选择器、并集选择器、伪类选择器、链接伪类选择器、:focus伪类选择器）
coderge's CSDN Blog.
04-10 406
文章目录1 什么是复合选择器2 后代选择器3 子选择器4 并集选择器5 伪类选择器6 链接伪类选择器7 :focus伪类选择器8 复合选择器总结 1 什么是复合选择器 在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ● 复合选择器可以更准确，更高效的选择目标元素(标签) ● 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的 ● 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等 2 后代选择器
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
weixin_41549971的博客
01-04 1307
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
CSS :focus使用
fly
04-11 4045
获取焦点时 ， 通常用于input，修改样式！
伪类和伪类选择器（总结）
m0_62487693的博客
02-18 574
nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素。:first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素。:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素。:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素。
[教程] CSS3 选择器——伪类选择器（一）
07-24 1191
前面花了两节内容分别在《》和《》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-chi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值