5.17 form

Q1: #userName, #passward {width: 160px; padding: 3px;}与.m-form .u-txt {width: 160px; padding: 3px;}样式为何有区别？什么原因导致？
用id和class来设置样式有区别么？？

#userName, #passward {width: 160px; padding: 3px;}

.m-form .u-txt {width: 160px; padding: 3px;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style type="text/css">
        body,button,input,legend {margin: 0;padding: 0;font: 16px "微软雅黑" ；}
        .m-form {margin: 150px auto ; width: 325px;border:1px solid #ddd;}
        .m-form legend {width: 100%; line-height: 30px; text-indent: 1em;color: #fff;background-color: #2d2d2d;}
        .m-form fieldset {border:none;padding: 20px;}
        .m-form div {margin: 20px;}
        #userName, #passward {width: 160px; padding: 3px;}
        
        button {width: 100%; height: 30px; color: #fff;border:1px solid #ddd; cursor: pointer;background-color: #2d7dca;}
        .disabled{background-color: #ddd;}
    </style>
</head>
<body>
    <form action="" class="m-form">
        <legend>登录</legend>
        <fieldset>
            <div>
                <label for="userName">用户名：</label>
                <input id="uesrName" type="text" class="u-txt">
            </div>
            <div>
                <label for="passward">密码：</label>
                <input id="passward" type="passward" class="u-txt">
            </div>
            <div><button id="login">登录</button></div>
        </fieldset>
    </form>
    <script type="text/javascript">
        var button = document.getElementById('login');
        button.onclick = function() {
            button.disabled = true;
            button.setAttribute('class','disabled');
        };
    </script>
</body>
</html>```

5.17 form

推荐阅读更多精彩内容