最近将bootstrap4 样式库迁移到小程序，发现：

小程序所支持的完整样式选择器，并没有在文档中说明。文档未提及的选择器，可能支持，可能不支持，需要实践验证。

css选择器 有多种模式，小程序官方文档只是说明支持了其中6种

1 #id,

2 .class,

3. element,

4. ::before,

5. ::after,

6. element,element，

实际上，类似[attribute=value]的选择器，也是支持的，部分伪类也是支持的，例如:active(虽然官网推荐用hover-class， 文档链接)

checkbox[checked] { //支持  width: 200rpx;  height: 200rpx;}checkbox:checked { //不支持  width: 200rpx;  height: 200rpx;}

加上小程序在自定义组件的文档上，又多说出了几种样式选择器，例如 >, []。种种迹象说明，小程序文档还是偷偷藏起来一些选择器。

组件对应

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 或更高版本的开发者工具支持）。

我猜测，小程序的css编译过程，只是一个简单的正则过滤过程，会将一些有注入风险或者明确不支持的代码排除掉。如果通过过滤，则直接应用到浏览器上。

有同样的同学，跟我一样注意到这一点，列出哪些样式支持，哪些不支持。

我这里搬运一下

1 #id,

2 .class,

3. element,

4. ::before,

5. ::after,

6. element,element，

除了这些，其实小程序还支持

7. element>element， element~element， element+element

9. :active, :hover,

10.:first-child,:last-child, :only-child, :nth-child(n), :nth-last-child(n),

11. :first-of-type, :last-of-type, :nth-of-type(n), :nth-last-of-type(n)

12 :not(selector)

明确不支持的：

*，:link， :visited, :focus, :enabled, :disabled, :checked

但是其中的一些伪类，可以用[attribute]和not选择器等价实现。

input:enabled => input:not([disabled])input:disabled => input[disabled]checkbox:checked => checkbox[checked]

另外，如果有些复杂的规则，小程序ide编译不通过的话，可以用些技巧让它编译通过。例如

修改成:.no-gutters > .col,.no-gutters > view[class*="col-"] {  padding-right: 0;  padding-left: 0;}

只要通过编译，样式肯定就是原封不动地应用在浏览器上，也就是会起作用。

小结

小程序支持的选择器比文档中描述的要多。

小程序的部分伪类不支持，可以通过[]等价替代。

小程序对css的编译检查有自己的逻辑，可以通过一些等价写法通过编译。