热门推荐
推荐产品
  • 微分销

    基于分享裂变,快速建立分销网络,引爆销量...

    详情
  • 移动商城

    帮您一站式搭建零售微商城,功能丰富,多端同步,...

    详情
  • 直播商城开发

    最火的小程序直播带货系统,小程序直播商城开发...

    详情
  • 小程序商城

    自带分销的小程序商城系统,一站式快速搭建...

    详情
  • 多用户商城

    快速搭建B2B2C电商平台,多商家入驻,类京东天猫...

    详情
企业服务
热门标签
最新文章
关注我们
您当前位置:东淮网络 > 干货邦 > 小程序学院 >

微信小程序组件对应 wxss 文件的样式

发布时间:2018-10-13 阅读: 来源:未知

导读:组件样式 组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用id选择器( #a )、属性选择器( [a] )和标签名 ...

组件样式

组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:

  • 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
  • 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
  • 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
  • 继承样式,如 font 、 color ,会从组件外继承到组件内。
  • 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

除此以外,组件可以指定它所在节点的默认样式,使用 :host 选择器(需要 1.7.2 或更高版本的开发者工具支持)。

代码示例:

/* 组件 custom-component.wxss */
:host {
  color: yellow;
}
:host(.dark) {
  color: black;
}
<!-- 页面的 WXML -->
<custom-component>这段文本是黄色的</custom-component>
<custom-component class="dark">这段文本是黑色的</custom-component>
标签:

【本站声明】 1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途; 2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利; 3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保; 4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。内容侵权或举报请邮件:dhuai@qq.com

你可能感兴趣的相关内容

淮安小程序开发只需这四个步骤!
淮安小程序开发只需这四个步骤!

在淮安越来越多企业商家开始意识到小程序的重要性,都想利用小程序开展自己的线上商城,那么 小程序商城 应该如何开发呢?步骤有哪些呢?下面小编就来告诉大家! 一、明确小...

甜品蛋糕店小程序开发解决方案
甜品蛋糕店小程序开发解决方案

蛋糕店小程序作为生日派对和合家团聚活动等必需品,还可以为用户提供小蛋糕等服务,为了减少用户排队等候的时间,商家可以随时在线进行预订蛋糕服务。而蛋糕小程序是符...

淮安头条/抖音小程序开发!
淮安头条/抖音小程序开发!

现在,我们对抖音小程序并不陌生。很多人想为自己制作一个小程序,小程序有四种类型:构建自己的团队、外包团队定制、使用第三方开发工具和开发自己的源代码。每种生产...

淮安小程序商城制作步骤流程!
淮安小程序商城制作步骤流程!

对许多想做小程序商城的淮安商家来说,了解小程序商城的制作步骤和开发流程非常重要,下面就跟随淮安小程序开发公司东淮网络的步伐一起了解一下吧~ (淮安专业小程序开发...

400-100-5797

187-0523-0308

商业合作请发dhuai@qq.com

东淮网络公众号