css伪类focus的测试

<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{background-color:yellow;
}
</style>
</head>
<body><p>在文本框中点击，您会看到黄色的背景：</p><form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form><p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p></body>
</html>

测试了一下，使用JavaScript代码调用button.focus()方法是无法看到这个focus效果的：

但是在Chrome开发者工具里手动选中:focus的checkbox可以看到focus效果：

上图的user agent stylesheet是Chrome浏览器自动设置的css style.

更多Jerry的原创文章，尽在：“汪子熙”:

css伪类focus的测试相关推荐

css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
小程序中的WXSS(css)选择器课程-伪类-:focus 伪类微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/hua ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
html分为哪两种,css伪类分为哪几种
css伪类分为UI伪类和结构化伪类两种.UI伪类分为链接伪类.focus伪类和target伪类.结构化伪类分为[:first-child].[:last-child]和[:nth-child]. CS ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
前端学习（219）:css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...

css伪类focus的测试

css伪类focus的测试相关推荐

最新文章

热门文章