V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
fetich
V2EX  ›  问与答

初级前端问题——为何无法覆盖浏览器自带样式

  •  
  •   fetich · 2016-08-04 00:29:25 +08:00 · 2092 次点击
    这是一个创建于 3032 天前的主题,其中的信息可能已经有所发展或是发生改变。

    截取了部分代码

    <form>
        ...
        <label for="password">密码:</label>
        <input type="password" id="password" name="pw">
        <br>
        <button>登陆</button>
    </form>
    
    * {
        margin: 0;
        padding: 0;
    }
    label {
        display: inline-block;
        width: 60px;
        height: 20px;
        text-align: left;
        font: 12px/20px SimSun;
    }
    input {
        box-sizing: border-box;
        width: 200px;
        height: 20px;
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }
    

    因为设置了 box-sizing: border-box;,同时有通配符选择器的规则,padding: 0,此时设置宽度、高度,以及边框,内容区大小应该为 198*18 ,但浏览器的结果为 Imgur,因为浏览器的这条内置规则 Imgur
    为何我定义的规则没有覆盖浏览器的规则呢,后者的优先级难道不是最低的?
    不知道是特例,抑或我的理解出现了纰漏,请各位前端前辈指点。

    14 条回复    2016-08-04 19:05:59 +08:00
    digimoon
        1
    digimoon  
       2016-08-04 00:36:53 +08:00
    没看懂什么问题,单独上面这些代码正常
    css 有权重
    xxxyyy
        2
    xxxyyy  
       2016-08-04 00:41:06 +08:00 via Android
    fetich
        3
    fetich  
    OP
       2016-08-04 01:02:05 +08:00
    @digimoon 就是在用通配符选择器重置浏览器样式后,为何第一张截图中上下內边距为 1 的问题
    xiaopc
        4
    xiaopc  
       2016-08-04 06:21:33 +08:00 via Android
    通配符*的权重低于浏览器定义的元素选择器。
    lslqtz
        5
    lslqtz  
       2016-08-04 07:34:00 +08:00
    body {
    margin: 0;
    padding: 0;
    }
    不知道是不是应该这样。。
    lslqtz
        6
    lslqtz  
       2016-08-04 07:34:34 +08:00
    个人认为还是单独对元素用 css 吧。。我没有其他方案,参考 4 楼
    66beta
        7
    66beta  
       2016-08-04 08:37:11 +08:00
    楼主了解下权重,而且*性能不太好
    suinia
        8
    suinia  
       2016-08-04 09:31:02 +08:00
    *明显没有 input 权重高。所以没有重置
    h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, th, td, input { margin: 0; padding: 0; }
    kingze1992
        9
    kingze1992  
       2016-08-04 12:25:01 +08:00
    行内样式选择器 > id 选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式 > 默认样式
    fetich
        10
    fetich  
    OP
       2016-08-04 16:05:05 +08:00
    @kingze1992 既然通配符选择器优先级(权重)大于默认样式,为何没有覆写默认样式呢?
    fetich
        11
    fetich  
    OP
       2016-08-04 16:09:59 +08:00
    @suinia
    @66beta
    @xiaopc 通配符选择器的权重是低了点(而且性能不好),但两者来源不同, author 里的规则权重整体高于 user agent ,所以应当能覆写浏览器的默认样式。
    > By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed, however, for "!important" rules. All user and author rules have more weight than rules in the UA's default style sheet.
    xiaopc
        12
    xiaopc  
       2016-08-04 17:13:34 +08:00
    @fetich ...没有复现这个问题 https://ooo.0o0.ooo/2016/08/04/57a306f360d13.png
    Chrome 51.0.2704.103 m
    fetich
        13
    fetich  
    OP
       2016-08-04 18:56:24 +08:00
    @xiaopc 刚刚发现了原因,\u200b 这是什么鬼!!!
    http://i.stack.imgur.com/uHOMs.png
    xiaopc
        14
    xiaopc  
       2016-08-04 19:05:59 +08:00 via Android
    @fetich 零宽度空格😄
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3962 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 05:25 · PVG 13:25 · LAX 21:25 · JFK 00:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.