老师帮我看看我的 focus伪类怎么没有生效呢? 是哪里写错了
<!DOCTYPE html><html>
<head lang="en"> <meta charset="UTF-8"> <title>动态伪类</title> <style type="text/css"> /* 3-30 编程练习根据gif效果图（ focus.gif），写出代码，实现：（1） 当鼠标悬浮在输入框上时，输入框边框颜色为红色（2） 当用户名输入框获得焦点时，输入框背景颜色变为橘色当密码输入框获得焦点时，输入框背景颜色变为黄色。任务第一步：先写出html代码，写出用户名输入框和密码输入框第二步：给两个输入框设置样式：当鼠标悬停在输入框上时，输入框的边框颜色变为红色提示：可以用到动态伪类选择器：hover第三步：给用户名输入框设置样式，当焦点在该输入框上时，背景颜色变为橘色提示：可以用到动态伪类选择器：focus第四步：给密码输入框设置样式，当焦点在该输入框上时，背景颜色变为黄色*/ /*此处写代码*/ input:hover { border-color: red; }
form p input.username:focus { background-color: orange; }
form p input.cipher:focus { background-color: yellow; } </style></head>
<body> <!-- 此处写代码 --> <form action=""> <p> 用户名: <input type="text" class="username"> </p> <p> 密码: <input type="text" class="cipher"> </p> </form></body>
</html>
搜索
复制
正在回答
同学你好，老师测试代码，focus生效了：
同学重新测试一下看看（代码要保存）。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星