微信小程序组件样式警告css选择器不可用

有时，我们自己在开发微信小程序的时候，会封装一些自定义组件，但是在开发工具里会提示：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

这是怎么回事儿，明明都是标准的CSS写法，怎么就警告了？

原因就在于，如果不遵守这些规范，组件很可能对引用组件的页面造成CSS污染。比如，你封装了一个标题组件，在组件里写view下字体为黑体加粗，这个黑体加粗会不会让引用标题组件的页面里的view字体都变成黑体加粗呢？

根据文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：

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

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

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

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

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

代码示例：

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */