注冊

微信小程序組件樣式,組件對應(yīng) wxss 文件的樣式

2017-12-15
導(dǎo)讀:組件對應(yīng) wxss 文件的樣式,只對組件wxml內(nèi)的節(jié)點(diǎn)生效。編寫組件樣式時(shí),需要注意以下幾點(diǎn)...

組件樣式

組件對應(yīng) wxss 文件的樣式,只對組件wxml內(nèi)的節(jié)點(diǎn)生效。編寫組件樣式時(shí),需要注意以下幾點(diǎn):

  • 組件和引用組件的頁面不能使用id選擇器(#a)、屬性選擇器([a])和標(biāo)簽名選擇器,請改用class選擇器。
  • 組件和引用組件的頁面中使用后代選擇器(.a .b)在一些極端情況下會(huì)有非預(yù)期的表現(xiàn),如遇,請避免使用。
  • 子元素選擇器(.a>.b)只能用于 view 組件與其子節(jié)點(diǎn)之間,用于其他組件可能導(dǎo)致非預(yù)期的情況。
  • 繼承樣式,如 font 、 color ,會(huì)從組件外繼承到組件內(nèi)。
  • 除繼承樣式外, app.wxss 中的樣式、組件所在頁面的的樣式對自定義組件無效。
#a { } /* 在組件中不能使用 */
[a] { } /* 在組件中不能使用 */
button { } /* 在組件中不能使用 */
.a > .b { } /* 除非 .a 是 view 組件節(jié)點(diǎn),否則不一定會(huì)生效 */

除此以外,組件可以指定它所在節(jié)點(diǎn)的默認(rèn)樣式,使用 :host 選擇器(需要 1.7.2 或更高版本的開發(fā)者工具支持)。

代碼示例:

/* 組件 custom-component.wxss */
:host {
  color: yellow;
}
:host(.dark) {
  color: black;
}
<!-- 頁面的 WXML -->
<custom-component>這段文本是黃色的</custom-component>
<custom-component class="dark">這段文本是黑色的</custom-component>
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)