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

組件樣式

組件對應(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>