微信小程序： including tag name selectors, ID selectors, and at

kingbal2024-08-25 20:06

微信小程序报错：

复制代码

Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

1、组件和引用组件的页面不能使用 id 选择器（#a）、属性选择器（ $a$ ）和标签名选择器，请改用 class 选择器。

2、组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

3、子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

4、继承样式，如 font 、 color ，会从组件外继承到组件内。

5、除继承样式外， app.wxss中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

我们项目排查出来问题是因为在写样式的时候我们直接将组件迭代名当成class来使用了

TypeScript 复制代码

.other-info image{
    color: red
}

这里直接给image组件声明一个class选择器名称就好

TypeScript 复制代码

<view class="other-info">
    <image src="http://www.kingbal.com"  class="qiming"/>
</view>


.other-info .qiming{
    color: red
}