some selectors are not allowed in component wxss
最近更新時間 2020-03-08 18:05:50
微信開發組件時引入了公共 scss 文件,報如下錯誤:
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
在公共 scss 文件中定義了 page 樣式,去掉page樣式,問題解決。如果在組件中使用會發出警告,微信開發文檔說明如下:
組件對應 wxss 文件的樣式,只對組件wxml內的節點生效。編寫組件樣式時,需要注意以下幾點:
- 組件和引用組件的頁面不能使用id選擇器(
#a
)、屬性選擇器([a]
)和標籤名選擇器,請改用class選擇器。 - 組件和引用組件的頁面中使用後代選擇器(
.a .b
)在一些極端情況下會有非預期的表現,如遇,請避免使用。 - 子元素選擇器(
.a>.b
)只能用於view
組件與其子節點之間,用於其他組件可能導致非預期的情況。 - 繼承樣式,如
font
、color
,會從組件外繼承到組件內。 - 除繼承樣式外,
app.wxss
中的樣式、組件所在頁面的的樣式對自定義組件無效(除非更改組件樣式隔離選項)。
#a { } /* 在組件中不能使用 */
[a] { } /* 在組件中不能使用 */
button { } /* 在組件中不能使用 */
.a > .b { } /* 除非 .a 是 view 組件節點,否則不一定會生效 */