uni-app 程序提示[pages/search/search] Some selectors are not allowed in component wxss

uni-app 程序提示[pages/search/search] Some selectors are not allowed in component wxss

1 回复

更多关于uni-app 程序提示[pages/search/search] Some selectors are not allowed in component wxss的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误提示是因为在 pages/search/search 页面的样式文件(wxss)中使用了小程序不支持的 CSS 选择器。

在 uni-app 中,当编译到微信小程序平台时,样式文件会转换为 WXSS。WXSS 对 CSS 选择器有特定限制,不支持以下选择器:

  1. 通配符选择器 (*)
  2. 属性选择器 (例如 [type="text"])
  3. 部分伪类选择器 (例如 :nth-child, :first-of-type 等)
  4. 标签名+类名 的联合选择器在某些情况下也可能受限

解决方法:

  1. 检查并修改样式:打开 pages/search/search.vue 文件,检查 <style> 部分,或者如果使用了外部样式,则检查对应的 CSS 文件。将不支持的选择器替换为标准的类选择器(.class)或 ID 选择器(#id)。

    • 例如:将 div > span 改为 .container .text,并为对应的元素添加 class。
  2. 使用条件编译:如果某些样式必须用于 H5 等其他平台,可以使用条件编译来隔离。

    /* #ifdef H5 */
    /* 这里写只在 H5 生效的、使用了高级选择器的样式 */
    /* #endif */
    
    /* #ifdef MP-WEIXIN */
    /* 这里写只在小程序生效的、符合 WXSS 规范的样式 */
    /* #endif */
回到顶部