收藏
回答

关于 WXSS 默认属性样式优先级问题

框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
小程序 Bug 客户端 6.6.7 2.0.8

在正常的浏览器中,浏览器自带的样式永远是优先级最低的,在一般介绍中

button[type=default] 这种属性选择器比 .my-btn 这种类选择器优先级要高。

但是如果 button[type=default] 是系统样式(浏览器自带样式),则优先级一定还是最低,一个普通的 class 就能覆盖。


在微信小程序中,button 的 type 默认值就是 default。

但下面两行的样式却完全不同

<button class="abc">测试</button>

<button class="abc" type="default">测试</button>


假设现在有一段样式 .abc {color:#F00;}

这时第一个按钮文字是红色,而第二个则还是系统的颜色。

因为小程序自带的属性选择器优先而把 .abc 的样式给盖掉了,这时只有把 .abc 改成 button.abc 增加优先级才能搞定。


似乎小程序里 [type=default] 不在系统层的低优先级里,而是跟应用层完全在一个优先级层次上,这给开发过程中的按钮样式设置增加了很多麻烦。


某些情况,比如我自定义了一个带按钮的组件,这个组件的 type 属性对应内部按钮的 type 属性,模板剥去无关的部分大概是这样

<button type="{{type}}"><slot></slot></button>

这时 type 值为 null 的情况下,模板输出的是 <button type="">SomeText</button>,这时按钮的样式因为有 type 而被系统自己覆盖了,十分无奈,而且没法办法让这个 type 在没有值时并不存在。


我顺手搜了一下,发现很多年前就有人在说这个问题了,但现在依然有。

回答关注问题邀请回答
收藏

2 个回答

  • Pader
    Pader
    2018-11-12

    事实上,浏览器并不是这样的,一个组件的默认样式永远都可以轻松的被任意自定义样式覆盖。

    2018-11-12
    有用
    回复
  • 一碗肉nina
    一碗肉nina
    2018-06-07

    你好,type设置的样式优先级会高于属性选择器。至于不设置type默认样式就是default呀

    2018-06-07
    有用
    回复 1
    • Pader
      Pader
      2018-11-12

      这就好比网页中的 div 默认 display:block;

      但一个 <div class="abc"></div> 在 .abc {display:none;} 的情况下却不能隐藏这个 div 一样,因为 div 默认就是 block 的。

      2018-11-12
      回复
登录 后发表内容