最全的微信小程序文档未支持选择器大全

前言

在微信小程序开发中，样式表（StyleSheet）是定义控件样式的重要工具。它允许开发者使用CSS（层叠样式表）来控制小程序的外观和布局。其中，选择器（Selector）是CSS的重要组成部分，用于匹配需要设置样式的元素。

微信小程序官方文档中列举了一些常用的选择器，但实际上，小程序还支持许多未在文档中提及的选择器。这些选择器可以帮助开发者更灵活地控制小程序中的布局和样式，实现更丰富的视觉效果。

未在文档中提及的支持的选择器

1. 结构性伪类选择器

• ::last-of-type(n) ：匹配元素是其父元素的最后一个子元素。例如：```wxss
  .item:last-of-type(2) {
  background-color: #f00;
  }

- **:nth-last-child(n)** ：匹配元素是其父元素的倒数第n个子元素。例如：```wxss
  .item:nth-last-child(2) {
    background-color: #f00;
  }

• :nth-last-of-type(n) ：匹配元素是其父元素的倒数第n个相同类型的子元素。例如：```wxss
  .item:nth-last-of-type(2) {
  background-color: #f00;
  }

- **:first-of-type** ：匹配元素是其父元素的第一个子元素。例如：```wxss
  .item:first-of-type {
    background-color: #f00;
  }

2. 属性选择器

• :[attribute=value] ：匹配元素具有指定属性且属性值为指定值的元素。例如：```wxss
  [id="app"] {
  background-color: #f00;
  }

- **[attribute~=value]** ：匹配元素具有指定属性且属性值包含指定值的元素。例如：```wxss
  [class~="item"] {
    background-color: #f00;
  }

• [attribute^=value] ：匹配元素具有指定属性且属性值以指定值开头的元素。例如：```wxss
  [id^="app"] {
  background-color: #f00;
  }

- **[attribute$=value]** ：匹配元素具有指定属性且属性值以指定值结尾的元素。例如：```wxss
  [id$="app"] {
    background-color: #f00;
  }

• [attribute=value]* ：匹配元素具有指定属性且属性值包含指定值的元素。例如：```wxss
  [class*="item"] {
  background-color: #f00;
  }

### 3. 其他选择器

- **::placeholder** ：匹配元素的占位符文本。例如：```wxss
  ::placeholder {
    color: #ccc;
  }

• :indeterminate ：匹配元素处于不确定状态。例如：```wxss
  .checkbox:indeterminate {
  background-color: #ccc;
  }

- **:disabled** ：匹配元素被禁用。例如：```wxss
  .button:disabled {
    background-color: #ccc;
  }

结语

以上就是微信小程序文档中未提及的支持的选择器的全部内容。这些选择器可以帮助开发者更灵活地控制小程序中的布局和样式，实现更丰富的视觉效果。希望本文对大家有所帮助。