# 选择器

web和小程序支持page元素选择器，以替代body元素选择器。
web端可以使用html、body、:root等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，html、:root写在页面style内无效，只能写在App.uvue内。
深度选择器 :deep()/::v-deep 用法参考单文件 style - 深度选择器文档。

名称	示例	Web	Android(VDOM)	Android(Vapor)	iOS(VDOM)	iOS(Vapor)	HarmonyOS(VDOM)	HarmonyOS(Vapor)	描述
通配选择器	* {}	4.0	x		x	x	x	x
类选择器	.class {}	4.0	3.9		4.11	5.11	4.61	5.0
元素选择器	[tag] {}	4.0	x		x	x	x	x	App平台蒸汽模式支持page选择器
ID 选择器	#[id] {}	4.0	x		x	x	x	x
属性选择器	[attr] {}	4.0	x		x	x	x	x
分组选择器	.a, .b {}	4.0	3.9		4.11	5.11	4.61	5.0
直接子代选择器	.a > .b {}	4.0	3.9	x	4.11	x	4.61	x
后代选择器	.a .b {}	4.0	3.9	x	4.11	x	4.61	x
一般兄弟选择器	.a ~ .b {}	4.0	3.9	x	4.11	x	4.61	x
紧邻兄弟选择器	.a + .b {}	4.0	3.9	x	4.11	x	4.61	x
伪类选择器	:active {}	4.0	x		x	x	x	x
伪元素选择器	::before {}	4.0	x		x	x	x	x

注意

选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新。
:active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。小程序平台均给view组件引入了hover-class，考虑到跨端兼容和体验，建议使用 hover-class 属性来实现点击态效果。详见
不推荐使用伪元素来创建不占宽度的边框，W3C标准推荐使用 box-sizing 来控制边框是否占宽度。
关系类选择器（分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择），无法在编译期处理，必须运行时动态计算，在App上有额外的性能损耗。推荐尽量使用简单的选择器来解决问题。

# 示例

<template>
  <view :class="docBody">
    <text :class="rowDesc">描述内容</text>
  </view>
</template>

<style>
  .doc-body1 .row-desc1 {
    color: #ff0000;
  }
  .doc-body1 .row-desc2 {
    color: #0000ff;
  }
  .doc-body2 .row-desc1 {
    color: #00ff00;
  }
</style>

<script setup lang="uts">
  const rowDesc = ref('row-desc1')
  const docBody = ref('doc-body1')
</script>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view :class="docBody">
    <text :class="rowDesc">描述内容</text>
  </view>
</template>

<style>
  .doc-body1 .row-desc1 {
    color: #ff0000;
  }
  .doc-body1 .row-desc2 {
    color: #0000ff;
  }
  .doc-body2 .row-desc1 {
    color: #00ff00;
  }
</style>

<script setup lang="uts">
  const rowDesc = ref('row-desc1')
  const docBody = ref('doc-body1')
</script>

以上代码示例，当我们把 rowDesc 变量从 row-desc1 变为 row-desc2 时，会更新 text 节点样式，但是如果把 docBody 变量从 doc-body1 变为 doc-body2，是不会更新 text 节点样式的。
因为 doc-body 不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能。

# 示例：css选择器

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步

不支持 Web，请运行 hello uni-app x 到 App 平台体验

<template>
  <view>
    默认通过page选择器设置padding: 16px
    <!-- WEB 和 MP-WEIXIN 暂不支持动态修改 page 的 style，因此不展示切换按钮 -->
    <!-- #ifndef WEB || MP-WEIXIN -->
    <button id="setPagePaddingButton" @tap="setPagePadding">切换page padding为20px</button>
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
// #ifndef WEB || MP-WEIXIN
const setPagePadding = () => {
  const pages = getCurrentPages()
  pages[pages.length - 1].querySelector('page')?.style.setProperty('padding', 'var(--page-padding-change)')
}
// #endif
</script>

<style>
  page {
    --page-padding-change: 20px;
    padding: var(--page-padding);
  }
</style>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view>
    默认通过page选择器设置padding: 16px
    <!-- WEB 和 MP-WEIXIN 暂不支持动态修改 page 的 style，因此不展示切换按钮 -->
    <!-- #ifndef WEB || MP-WEIXIN -->
    <button id="setPagePaddingButton" @tap="setPagePadding">切换page padding为20px</button>
    <!-- #endif -->
  </view>
</template>

<script setup lang="uts">
// #ifndef WEB || MP-WEIXIN
const setPagePadding = () => {
  const pages = getCurrentPages()
  pages[pages.length - 1].querySelector('page')?.style.setProperty('padding', 'var(--page-padding-change)')
}
// #endif
</script>

<style>
  page {
    --page-padding-change: 20px;
    padding: var(--page-padding);
  }
</style>

注意

App端相邻选择器暂不支持动态新增或删减节点，为了优化性能减少一些重新渲染工作，示例 https://issues.dcloud.net.cn/pages/issues/detail?id=1452