微信小程序組件樣式,組件對應 wxss 文件的樣式
2017-12-15
導讀：組件對應 wxss 文件的樣式，只對組件wxml內的節點生效。編寫組件樣式時，需要注意以下幾點...
組件樣式
組件對應 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>
第二部分：如何開通一個小商店
您可能感興趣:
掃碼免費領取運營資料包
