任意元素的focus伪类

在w3school中国上可以查看到这么一句话：

定义和用法 :focus 伪类在元素获得焦点时向元素添加特殊的样式。注释：IE 浏览器不支持此属性。说明这个伪类应用于有焦点的元素。例如 HTML 中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会输入到这个输入框。其他元素（如超链接）也可以有焦点，不过 CSS 没有定义哪些元素可以有焦点。

不是所有的元素都具有:focus伪类，使得:focus伪类没有:hover :active等常用，但我们知道对于设定了id的元素是使用锚是可以使任意元素获得焦点的.这就给我们以启示，其实任意元素都具有:focus伪类的，只是没有触发。通过仔细观察发现，能触发的元素，如textarea、input的共同特点是有这样的css设置：user-modify:read-write，即为可编辑状态，在chrome的开发人员工具下可以发现-webkit-user-modify: read-write;当然对不同浏览器有不同的前缀。因而我们可以通过user-modify来中介是任意元素获得焦点。如下面例子：

可使用focus伪类的div

转载于:https://www.cnblogs.com/defims/archive/2011/10/16/2946705.html

任意元素的focus伪类相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
focus伪类选择器
focus伪类选择器 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
【CSS-进阶之元素：focus伪类模拟点击事件】
先放上我们最终实现的效果注:这里建议插入codepen(临时使用图片代替) 我们想要实现当点击某个元素时,显示一个tip浮动框. html: <div class="wrapper& ...
css复合选择器（后代选择器、子代选择器、并集选择器、链接伪类选择器、：focus选择器）
什么是复合选择器? 在css中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签 ...
CSS样式中伪类和伪类元素的区别（css中一个冒号和两个冒号的区别）
首先介绍下什么是伪类,所谓伪类就是: 伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性等静态的标志.由于状态是动态变化的,所以一个元素达到一个特 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
CSS 伪类与伪元素
CSS的元素选择器除了根据id(#).class(.).属性([ ])选取元素以外,还有很重要的一类,就是根据元素的特殊状态来选取元素.它们就是伪类和伪元素.跟id选择器.类选择器.属性选择器以及派生 ...
014_CSS伪类选择器
1. 伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素. 2. 所谓伪类选择器, 是相对于"类选择器"来说的.伪类选择器类似于添加类, 所以可以是多个. 3. ...

任意元素的focus伪类

任意元素的focus伪类相关推荐

最新文章

热门文章