<!DOCTYPE html>
2 <html>
3 <meta charset="utf-8" />
4 <head>
5 <style type="text/css">
6 a {text-decoration:none;}
7 body{font-family:Helvetica;}
8 #div_body{width:420.4px;height:275.2px;border:thin solid #b9b9b9;border-radius:8px;}
9 #div_body_head{width:420.4px;height:39.6px;color:#fff;font-weight:bold;font-size:17px;border-radius:8px 8px 0 0;
10 border:thin solid #C17259;
11 background:-webkit-linear-gradient(top,#F7928C,#D87353);
12
13
14 }
15 .body_head_span{display:inline-block;position:relative;top:9px;color:#fff;text-align:center;}
16 #ico_close:hover {background:#fff;color:#D87353;}
17 .inputBlank{display:block;font-size:14px;position:relative;left:28px;width:330px;border:thin solid #DCDCDC;padding:12px;color:#6A6969;}
18 #div_foot{position:relative;top:85px;}
19 #div_foot_login{position:relative;left:144px;border:thin solid #B6CAD1;width:100px;font-size:16px;color:#8199A1;font-weight:bold;padding:6px;
20 background:-webkit-linear-gradient(top,#EFF6F9,#C6DFE9);
21 border-radius:20px;
22 text-align:center;
23 display:inline-block;
24 }
25 #div_foot_login:active{background:#C6DFE9;color:#EFF6F9;}
26 #div_chbox{
27 display:inline-block;
28 left:25px;
29 position:relative;
30 line-height:28px;
31 }
32 #remember{zoom:150%;position:relative;top:3px;}
33 </style>
34 <script type="text/javascript">
35 document.addEventListener("DOMContentLoaded",function(){
36 var uName = document.getElementById("uName");
37 var uPass = document.getElementById("uPass");
38
39 function elementOperate(obj){
40 var defaultVal = obj.id==="uName"?"Username":"Password";
41 var value;
42 return {
43 Txt_onfocus:function(){
44 value = obj.value;
45 if(value === defaultVal){
46 obj.value = '';
47 obj.select();
48 }else {
49 obj.select();
50 }
51 },
52 Txt_onblur:function(){
53 value = obj.value;
54 if(value ==''){
55 obj.value = defaultVal;
56 }else {
57 }
58 }
59 }
60 }
61
62 uName.onclick = elementOperate(uName).Txt_onfocus;
63 uName.onblur = elementOperate(uName).Txt_onblur;
64 uPass.onclick = elementOperate(uPass).Txt_onfocus;
65 uPass.onblur = elementOperate(uPass).Txt_onblur;
66 },false);
67 </script>
68 </head>
69 <body>
70 <div id="div_body">
71 <div id="div_body_head">
72 <span style="left:20px;" class="body_head_span">Sign In</span>
73 <a href="#"><span class="body_head_span" id="ico_close" style="left:320px;width:20px;">x</span></a>
74 </div>
75 <input type="text" id="uName" class="inputBlank" value="Username" style="top:26px;"/>
76 <input type="text" id="uPass" class="inputBlank" value="Password" style="top:52px;"/>
77 <div id="div_foot">
78 <div id="div_chbox"><input type="checkbox" name="remember" id="remember" /><label for="remember">Remember me</label></div>
79 <a href="#"><div id="div_foot_login">Log In</div></a>
80 </div>
81 </div>
82 </body>
83 </html>
我的问题是:
请注意观察源码的6,26,31行。
为了不被a标签的默认样式(下划线以及字体颜色深蓝)影响,我写了第6行的css。
但是只有第31行的a标签受到了text-decoration的影响,
第26行没有被影响到。
在chrome中查看element的时候可以看到第26行的样式是
Inherited from a:
user agent stylesheet a:-webkit-any-link {
color: -webkit-link;
cursor: auto;
}
为什么 text-decoration:none 影响不到第26行?怎么解决?
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。