想问下老师这段代码错在哪里呀

想问下老师这段代码错在哪里呀

我没加:focus的时候 输入框颜色都是正常的,加了之后就没反应了。。

<style type="text/css">

            /*此处写代码*/

            input:hover{

                border-color:red;

            }

            .name input:focus{

                background-color:orange;

            }

            .mima input:focus{

                background-color:yellow;

            }

        </style>

    </head>

    <body>

        <!-- 此处写代码 -->

        <form>

            <div class="name">

            用户名:<input type="text">

            </div> 

            <div class="mima">

            密码:<input type="password">

            </div>

        </form>

    </body>


还有两个其他问题

1.  <input type="text">这里面类名是input吗?可以给input里面加class吗?

写成<input type="text" class="name1">可以吗?

2. 类名是不是不能和属性名长得一模一样啊?一般密码框的类名都会怎么起呢?起password感觉跟type属性名就一模一样了

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,问题解答如下:

1、代码实现是正确的,建议同学再使用chrome浏览器测试下。

2、<input type="text"> 中的input是标签名,而不是类名。

可以添加class。

可以写成<input type="text" class="name1">。

3、不是的,类名可以和属性名一样。

一般密码框的类名会设置为password,或者简写为pwd。

祝学习愉快~

  • Hanabie 提问者 #1

    老师好,我想在问下如果我给input标签添加了class,然后给这个class上样式应该怎么写啊?

    怎样给两个class同时添加样式呢

       <style type="text/css">

          /*此处写代码*/

          .neme1 .psw:hover{

              border-color:red;

          }

          .name1:focus{

              background-color:orange;

          }

          .psw:focus{

              background-color:yellow;

          }

      </style>

    </head>

    <body>

      <!-- 此处写代码 -->

      <form>

          <div class="name">

          用户名:<input type="text" class="name1">

          </div>

          <div class="password">

          密码:<input type="password" class="psw">

          </div>

      </form>

     这样写完所有的样式都没有效果了。。是哪里出问题了呢

    2022-07-17 16:49:24
  • 好帮手慕慕子 回复 提问者 Hanabie #2

    问题解答如下:

    1、没有给.name1添加伪类:hover,且name1拼写错误,n后面是a,而不是e。

    2、可以使用组合选择器,同时给两个选择器添加样式。

    建议修改:

    https://img1.sycdn.imooc.com//climg/62d3d48d092f4c2206360146.jpg

    祝学习愉快~

    2022-07-17 17:22:29
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师