注冊

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

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

組件樣式

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

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

除此以外，組件可以指定它所在節(jié)點的默認樣式，使用 :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>
重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

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

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

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

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

第七部分：小程序直播

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

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

第十部分：小程序客服

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

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