tmui-cli 2.0.5 → 5.3.1

package/data/uniappx/css/common/function.md

@@ -53,37 +53,37 @@ App平台 VDOM模式注意事项：
 >示例
 ```vue
 <template>
-  <view class="page uni-theme-root">
+  <view class="page">
     <view class="status-bar-height">
-      <text class="light-label">通过var(--status-bar-height)获取状态栏高度</text>
+      <text class="light-label">通过var(--status-bar-height)获取状态栏高度</text>
     </view>
     <view class="status-bar-window" :style="{ height: statusBarHeight + 'px' }">
-      <text class="dark-label">通过uni.getWindowInfo获取状态栏高度</text>
+      <text class="dark-label">通过uni.getWindowInfo获取状态栏高度</text>
     </view>
     <view class="status-bar-unipage" :style="{ height: statusBarHeight2 + 'px' }">
-      <text class="dark-label">通过this.$page.statusBarHeight获取状态栏高度</text>
+      <text class="dark-label">通过this.$page.statusBarHeight获取状态栏高度</text>
     </view>
     <view class="window-top">
-      <text class="light-label">window top</text>
+      <text class="light-label">window top</text>
     </view>
     <view class="window-bottom">
-      <text class="light-label">window bottom</text>
+      <text class="light-label">window bottom</text>
     </view>
 
     <view class="uni-safe-area-inset-top">
-      <text class="dark-label">height:var(--uni-safe-area-inset-top)</text>
+      <text class="dark-label">height:var(--uni-safe-area-inset-top)</text>
     </view>
     <view class="uni-safe-area-inset-left">
-      <text class="dark-label">height:var(--uni-safe-area-inset-left)</text>
+      <text class="dark-label">height:var(--uni-safe-area-inset-left)</text>
     </view>
     <view class="uni-safe-area-inset-right">
-      <text class="light-label">height:var(--uni-safe-area-inset-right)</text>
+      <text class="light-label">height:var(--uni-safe-area-inset-right)</text>
     </view>
     <view class="uni-safe-area-inset-bottom">
-      <text class="dark-label">height:var(--uni-safe-area-inset-bottom)</text>
+      <text class="dark-label">height:var(--uni-safe-area-inset-bottom)</text>
     </view>
     <view class="uni-fixed-bottom">
-      <text class="light-label">此区域应显示在安全区域内</text>
+      <text class="light-label">此区域应显示在安全区域内</text>
     </view>
   </view>
 </template>
@@ -91,16 +91,16 @@ App平台 VDOM模式注意事项：
 
 
 <style>
-  .page {
-    flex: 1;
-  }
-
-  .dark-label {
-    color: #1a1a1a;
-  }
-
-  .light-label {
-    color: #ffffff;
+  .page {
+    flex: 1;
+  }
+
+  .dark-label {
+    color: #1a1a1a;
+  }
+
+  .light-label {
+    color: #ffffff;
   }
 
   .status-bar-height {
@@ -619,6 +619,11 @@ web平台的 CSS环境变量规范参考[MDN Reference](https://developer.mozill
 ## calc @calc
 > uni-app x 5.31+ App平台 蒸汽模式支持calc方法
 
+### 兼容性  
+ | Web | 微信小程序 | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) |
+| :- | :- | :- | :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | x | 5.31 | x | 5.31 | x | 5.31 |
+
 calc() 函数允许在声明 CSS 属性值时执行计算。
 
 ### 语法
@@ -639,7 +644,7 @@ calc() 函数允许在声明 CSS 属性值时执行计算。
 优先级控制：乘除法的优先级高于加减法，如果你想先算加减，必须用圆括号 () 括起来，例如 calc((100% - 20px) / 2)
 
 ### 形式化语法
-```css 
+```css
 <calc()> =
   calc( <calc-sum> )
 
@@ -656,9 +661,405 @@ calc() 函数允许在声明 CSS 属性值时执行计算。
   ( <calc-sum> )
 ```
 
+### 示例 
+ 示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/CSS/function/calc.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/CSS/function/calc.uvue) 
+>
+> 该 API 不支持 Web，请运行 hello uni-app x 到 App 平台体验 
+
+::: preview
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/CSS/function/calc
+```uvue
+<template>
+  <view ref="pageRef" class="page">
+    <view class="calc-style-test">
+      <text class="calc-test-label">width: {{ calcMode ? 'calc(50% / 2 + 24px)' : '375rpx' }}; height: calc((12px + 8px) * 2);</text>
+      <view class="track ">
+        <view ref="switchRef" class="basic-case">
+          <text class="case-text">{{ calcMode ? '50% / 2 + 24px' : '375rpx' }}</text>
+        </view>
+      </view>
+    </view>
+    <button class="switch-button element-bottom" size="mini" @click="toggleCalcValue">切换 calc / 375rpx</button>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">width: calc(var(--calc-base) * 2); height: calc(var(--calc-base) + 12px);</text>
+      <view class="variable-row  element-bottom">
+        <view class="variable-case">
+          <text class="case-text">var * 2</text>
+        </view>
+        <button size="mini" @click="toggleVariable">切换变量</button>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">height/padding: calc(var(--uni-safe-area-inset-*) + px);</text>
+      <view class="safe-area-case  element-bottom">
+        <text class="safe-area-text" style="background-color: #1f9d68;">safe area</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">width: calc(375rpx + 50% - 12px);</text>
+      <view class="rpx-test element-bottom" style="background-color: #2878d0;">
+        <text style="font-size: 12px;color: #ffffff;">width:calc(375rpx + 50% - 12px);</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">padding: calc(10px);</text>
+      <view class="padding-test element-bottom" style="background-color: #2878d0;">
+        <text style="font-size: 12px;color: #ffffff;background-color: #1f9d68;">padding: calc(10px);</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">margin: calc(var(--calc-base) + 2px);</text>
+      <view class="element-bottom" style="background-color: #2878d0;">
+        <text class="margin-test" style="font-size: 12px;color: #ffffff;background-color: #1f9d68;">margin: calc(var(--calc-base) + 2px);</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">border-bottom-left-radius: calc(60rpx);</text>
+      <view ref="borderBottomLeftRadiusRef" class="calc-test-box">
+        <text class="case-text">bottom left</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">border-bottom-right-radius: calc(50% - 30px);</text>
+      <view ref="borderBottomRightRadiusRef" class="calc-test-box">
+        <text class="case-text">bottom right</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">border-radius: calc(var(--border-radius) - 30px);</text>
+      <view ref="borderRadiusRef" class="calc-test-box">
+        <text class="case-text">radius</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">border-top-left-radius: calc((12.5% + 15px)*2);</text>
+      <view ref="borderTopLeftRadiusRef" class="calc-test-box">
+        <text class="case-text">top left</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">border-top-right-radius: calc(60px);</text>
+      <view ref="borderTopRightRadiusRef" class="calc-test-box">
+        <text class="case-text">top right</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">transform: translateX(calc(10% + 12px));</text>
+      <view ref="transformRef" class="calc-test-box">
+        <text class="case-text">transform</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">transform-origin: calc(25% + 10px) calc(50% - 6px);</text>
+      <view ref="transformOriginRef" class="calc-test-box">
+        <text class="case-text">origin</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">box-shadow: calc(4px + 4rpx) calc(3px + 1rpx) calc(2px + 6rpx) #999999;</text>
+      <view ref="boxShadowRef" class="calc-test-box">
+        <text class="case-text">shadow</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">opacity: calc(0.35 + 0.35);</text>
+      <view ref="opacityRef" class="calc-test-box">
+        <text class="case-text">opacity</text>
+      </view>
+    </view>
+
+    <view class="calc-style-test element-bottom">
+      <text class="calc-test-label">hover-class: width/height/opacity 使用 calc()</text>
+      <view class="calc-hover-box" hover-class="calc-hover-class" :hover-stay-time="1000">
+        <text class="case-text">hover</text>
+      </view>
+    </view>
+
+    <view v-if="jestCalcTestVisible" class="jest-calc-test-suite">
+      <view class="jest-calc-test-stage">
+        <view class="jest-calc-target" :style="{
+          width: jestCalcTestWidth,
+          height: 'calc((12px + 8px) * 2)',
+          paddingTop: 'calc(6px + 4px)',
+          paddingRight: 'calc(5px * 2)',
+          paddingBottom: 'calc(20px / 2)',
+          paddingLeft: 'calc(var(--calc-jest-base) - 2px)',
+          marginTop: 'calc(var(--calc-jest-base) + 2px)',
+          marginRight: 'calc(8px + 4px)',
+          marginBottom: 'calc(24px / 2)',
+          marginLeft: 'calc((4px + 8px))'
+        }">
+          <text class="jest-calc-test-text">calc</text>
+        </view>
+        <view class="jest-calc-flex-row">
+          <view ref="jestFlexBasisRef" class="jest-calc-flex-basis"></view>
+        </view>
+        <view ref="jestBorderRef" class="jest-calc-test-box jest-calc-border"></view>
+        <view ref="jestBorderTopRef" class="jest-calc-test-box jest-calc-border-top"></view>
+        <view ref="jestBorderRightRef" class="jest-calc-test-box jest-calc-border-right"></view>
+        <view ref="jestBorderBottomRef" class="jest-calc-test-box jest-calc-border-bottom"></view>
+        <view ref="jestBorderLeftRef" class="jest-calc-test-box jest-calc-border-left"></view>
+        <view ref="jestBorderWidthRef" class="jest-calc-test-box jest-calc-border-width"></view>
+        <view ref="jestBorderTopWidthRef" class="jest-calc-test-box jest-calc-border-top-width"></view>
+        <view ref="jestBorderRightWidthRef" class="jest-calc-test-box jest-calc-border-right-width"></view>
+        <view ref="jestBorderBottomWidthRef" class="jest-calc-test-box jest-calc-border-bottom-width"></view>
+        <view ref="jestBorderLeftWidthRef" class="jest-calc-test-box jest-calc-border-left-width"></view>
+        <view ref="jestBorderRadiusRef" class="jest-calc-test-box jest-calc-border-radius"></view>
+        <view ref="jestBorderTopLeftRadiusRef" class="jest-calc-test-box jest-calc-border-top-left-radius"></view>
+        <view ref="jestBorderTopRightRadiusRef" class="jest-calc-test-box jest-calc-border-top-right-radius"></view>
+        <view ref="jestBorderBottomRightRadiusRef" class="jest-calc-test-box jest-calc-border-bottom-right-radius"></view>
+        <view ref="jestBorderBottomLeftRadiusRef" class="jest-calc-test-box jest-calc-border-bottom-left-radius"></view>
+        <view ref="jestTransformRef" class="jest-calc-test-box jest-calc-transform"></view>
+        <view ref="jestTransformOriginRef" class="jest-calc-test-box jest-calc-transform-origin"></view>
+        <view ref="jestBoxShadowRef" class="jest-calc-test-box jest-calc-box-shadow"></view>
+        <text ref="jestTextShadowRef" class="jest-calc-text-shadow">text shadow</text>
+        <view class="jest-calc-backdrop-stage">
+          <view class="jest-calc-backdrop-color"></view>
+          <view ref="jestBackdropFilterRef" class="jest-calc-backdrop-filter"></view>
+        </view>
+        <view ref="jestOpacityRef" class="jest-calc-test-box jest-calc-opacity"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+
+
+<style>
+  .page {
+    --calc-base: 28px;
+    --border-radius: 60px;
+    --calc-surface-color: #dfe3e8;
+    --calc-text-color: #202124;
+    flex-grow: 1;
+    padding: 12px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .page {
+      --calc-surface-color: #3b3b3b;
+      --calc-text-color: #ffffff;
+    }
+  }
+
+  .element-bottom {
+    margin-bottom: 12px;
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--calc-text-color, #202124);
+  }
+
+  .track {
+    width: 100%;
+    height: 40px;
+    background-color: var(--calc-surface-color, #dfe3e8);
+  }
+
+  .switch-button {
+    margin-top: 6px;
+  }
+
+  .basic-case {
+    width: calc(50% / 2 + 24px);
+    height: calc((12px + 8px) * 2);
+    align-items: center;
+    justify-content: center;
+    background-color: #2878d0;
+  }
+
+  .variable-row {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .variable-case {
+    width: calc(var(--calc-base) * 2);
+    height: calc(var(--calc-base) + 12px);
+    margin-right: 12px;
+    align-items: center;
+    justify-content: center;
+    background-color: #2878d0;
+  }
+
+  .case-text,
+  .safe-area-text {
+    font-size: 12px;
+    color: #ffffff;
+  }
+
+  .safe-area-case {
+    width: 100%;
+    height: calc(var(--uni-safe-area-inset-top) + var(--uni-safe-area-inset-bottom) + 48px);
+    padding-top: calc(var(--uni-safe-area-inset-top) + 6px);
+    padding-right: calc(var(--uni-safe-area-inset-right) + 6px);
+    padding-bottom: calc(var(--uni-safe-area-inset-bottom) + 6px);
+    padding-left: calc(var(--uni-safe-area-inset-left) + 6px);
+    background-color: #2878d0;
+    margin-bottom: 12px;
+  }
+
+  .fixed-test {
+    position: fixed;
+    height: 60px;
+    width: 100%;
+    background-color: #2878d0;
+    top: calc(100% - 70px);
+  }
+
+  .rpx-test {
+    width: calc(375rpx + 50% - 12px);
+  }
+
+  .padding-test {
+    background-color: var(--calc-surface-color, #dfe3e8);
+    padding: calc(10px);
+  }
+
+  .margin-test {
+    margin: calc(var(--calc-base) + 2px);
+  }
+
+  .calc-style-test {
+    flex-direction: column;
+    padding: 10px;
+    background-color: var(--calc-surface-color, #dfe3e8);
+  }
+
+  .calc-test-label {
+    margin-bottom: 8px;
+    font-size: 12px;
+    color: var(--calc-text-color, #202124);
+  }
+
+  .calc-test-box {
+    width: 120px;
+    height: 48px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2878d0;
+  }
+
+  .calc-hover-box {
+    width: 120px;
+    height: 48px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2878d0;
+  }
+
+  .calc-hover-class {
+    width: calc(50% + 20px);
+    height: calc(var(--calc-base) + 36px);
+    opacity: calc(0.75 - 0.35);
+    background-color: #1f9d68;
+  }
+
+  .jest-calc-test-suite {
+    --calc-jest-base: 12px;
+    width: 200px;
+    height: 120px;
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .jest-calc-test-stage {
+    width: 200px;
+    height: 100px;
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  .jest-calc-target {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2878d0;
+  }
+
+  .jest-calc-test-text {
+    font-size: 12px;
+    color: #ffffff;
+  }
+
+  .jest-calc-flex-row {
+    width: 160px;
+    height: 28px;
+    flex-direction: row;
+    margin-top: 4px;
+    background-color: #dfe3e8;
+  }
+
+  .jest-calc-flex-basis {
+    height: 28px;
+    flex-direction: column;
+    flex-shrink: 0;
+    background-color: #1f9d68;
+  }
+
+  .jest-calc-test-box {
+    width: 80px;
+    height: 32px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 4px;
+    background-color: #2878d0;
+  }
+
+  .jest-calc-text-shadow {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #202124;
+  }
+
+  .jest-calc-backdrop-stage {
+    width: 80px;
+    height: 32px;
+    flex-direction: column;
+    margin-top: 4px;
+    overflow: visible;
+  }
+
+  .jest-calc-backdrop-color {
+    width: 80px;
+    height: 32px;
+    flex-direction: column;
+    background-color: #1f9d68;
+  }
+
+  .jest-calc-backdrop-filter {
+    position: absolute;
+    width: 80px;
+    height: 32px;
+    flex-direction: column;
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+</style>
+
+```
+
 **注意：**
 App平台相比web平台，calc有以下差异：
 - `calc`中只支持`var` 方法, 不支持 `<frequency>`, `<angle>`, `<time>`, `<color-function>`,`<resolution>`, `<flex>`
 - 支持的属性`<width>`,`<height>`,`<padding-*>`,`<maring-*>`,`<border-*>`,`<top>`,`<left>`,`<right>`,`<bottom>`,`<flex-basis>`
-- `border-*-radius`目前不支持两值，如：border-bottom-right-radius: 10px 20px; 如果使用了 `calc` 且含百分比会根据width进行计算，如：border-bottom-right-radius: calc(50%); 且宽为 40px 计算之后的样式为:border-bottom-right-radius: 20px;
-- `border-width-*` 目前不支持百分比，该属性的calc也不支持
+- `border-*-radius`目前不支持双值配置(例如：border-bottom-right-radius: 10px 20px;) 百分比计算基准：若在圆角中使用 calc() 且包含百分比，其计算基准固定为 width（宽度）。（示例：当元素宽度为 40px 时，border-bottom-right-radius: calc(50%); 将被转换为 20px）;
+- `border-width-*` 属性本身不支持百分比单位，且其对应的 calc() 计算同样不支持百分比。

package/data/uniappx/css/common/length.md

@@ -19,8 +19,8 @@ CSS 长度数据类型 `<percentage>` 表述一个百分比值。许多 CSS 属
 ### 兼容性
 | 名称 | 兼容性 | 描述 |
 | :- | :- | :- |
-| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
-| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） |   |
+| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） |   |
 | em | Web 4.0 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 | rem | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 | cap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
@@ -63,7 +63,7 @@ CSS 长度数据类型 `<percentage>` 表述一个百分比值。许多 CSS 属
 | vmax | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 | vmin | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 | vw | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
-| % | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | app平台仅width、height、padding(-*)、margin(-*)、top、left、right、bottom、flex-basis等属性支持 |
+| % | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | app平台仅width、height、padding(-*)、margin(-*)、top、left、right、bottom、flex-basis等属性支持 |
 | fr | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 
 ### rpx
@@ -132,8 +132,8 @@ rpx仅适用于需要根据屏幕宽度变化的view或image的宽度width设置
 
 | 名称 | 兼容性 | 描述 |
 | :- | :- | :- |
-| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
-| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 |   |
+| px | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） |   |
+| rpx | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） |   |
 | em | Web 4.0 / 微信小程序 4.41 / Android(VDOM) 3.9 / Android(Vapor) x / iOS(VDOM) 4.11 / iOS(Vapor) x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | app平台仅line-height属性支持 |
 | rem | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |
 | cap | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） |   |

package/data/uniappx/css/common/selector.md

@@ -1,8 +1,11 @@
 # 选择器 @selector
 
-- web和小程序支持page元素选择器，以替代body元素选择器。
-- web端可以使用`html`、`body`、`:root`等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，`html`、`:root`写在页面style内无效，只能写在App.uvue内。
-- 深度选择器 `:deep()/::v-deep` 用法参考 [单文件 style - 深度选择器](/vue/index#scoped) 文档。
+App平台，支持的选择器比web少。这源于开发进度、性能、运行时体积、AI友好度等多方面考虑。
+
+支持过多的选择器，会引入复杂的css优先级问题，这会导致性能下降，AI也容易搞错css优先级。
+简单的class，可能多写几行代码，但对AI来说这不算什么，反而复杂的css权重让AI难以排查问题。\
+
+uni-app x 额外引入了page选择器，该选择器是小程序规范，uni-app x 中全平台均支持。
 
 | 名称 | 示例 | Web | Android(VDOM) | Android(Vapor) | iOS(VDOM) | iOS(Vapor) | HarmonyOS(VDOM) | HarmonyOS(Vapor) | 描述 |
 | :- | :- | :- | :- | :- | :- | :- | :- | :- | :- |
@@ -19,13 +22,25 @@
 | 伪类选择器 | :active {} | 4.0 | x |   | x | x | x | x |  |
 | 伪元素选择器 | ::before {} | 4.0 | x |   | x | x | x | x |  |
 
-::: warning 注意
-1. 选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，**当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新**。
-2. :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。小程序平台均给view组件引入了`hover-class`，考虑到跨端兼容和体验，建议使用 `hover-class` 属性来实现点击态效果。[详见](../../component/view.md#hover-class)
-3. 不推荐使用伪元素来创建不占宽度的边框，W3C标准推荐使用 box-sizing 来控制边框是否占宽度。
-4. 关系类选择器（分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择），无法在编译期处理，必须运行时动态计算，在App上有额外的性能损耗。推荐尽量使用简单的选择器来解决问题。
+## App平台不支持情况的替代方案
+### 伪类
+- 通过`:active`伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失。小程序平台均给view组件引入了`hover-class`，考虑到跨端兼容和体验，需使用 `hover-class` 属性来实现点击态效果。[详见](../../component/view.md#hover-class)
+- :first-child / :last-child / :nth-child()，需改用动态class方式，示例代码[详见](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/CSS/border/dynamic-border.uvue)
+
+### 伪元素
+- 字体图标，无法使用`::before`、`::after`等伪元素，而需使用unicode直显方案。[详见](./at-rules.md#iconfont)
+- 不推荐使用伪元素来创建不占宽度的边框，W3C标准推荐使用 box-sizing 来控制边框是否占宽度。
+- `::placeholder`：在input和textarea组件中，替代方案是[placeholder-class](../../component/input.md)。
+- `::selection`：在input和textarea组件中，小程序和App平台可通过cursor-color影响选区颜色；在rich-text组件中，App平台支持selection-handle-color、selection-background-color属性来设置选区样式。
+- `::part`：小程序和App平台不支持web component。仅支持vue组件，可使用[externalClass](./style-isolation.md#external-class)来设置组件中子组件的样式。
 
-## 示例
+### 关系选择器
+关系类选择器（分组选择器、直接子代选择器、后代选择器、一般兄弟选择器、紧邻兄弟选择），在App平台VDOM模式曾被支持，蒸汽模式暂不支持。
+
+## App平台是后设生效
+选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，**当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新**。
+
+示例
 
 ```vue
 <template>
@@ -51,5 +66,6 @@
 以上代码示例，当我们把 `rowDesc` 变量从 `row-desc1` 变为 `row-desc2` 时，会更新 `text` 节点样式，但是如果把 `docBody` 变量从 `doc-body1` 变为 `doc-body2`，是不会更新 `text` 节点样式的。\
 因为 `doc-body` 不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能。
 
-::: warning 注意
-App端相邻选择器暂不支持动态新增或删减节点，为了优化性能减少一些重新渲染工作，示例 [https://issues.dcloud.net.cn/pages/issues/detail?id=1452](https://issues.dcloud.net.cn/pages/issues/detail?id=1452)
+## tips
+- web端可以使用`html`、`body`、`:root`等选择器。由于页面的css样式隔离，且html节点并未添加data-xxx属性，`html`、`:root`写在页面style内无效，只能写在App.uvue内。
+- 深度选择器 `:deep()/::v-deep` 用法参考 [单文件 style - 深度选择器](../../vue/README.md#scoped) 文档。

package/data/uniappx/css/direction.md

@@ -44,9 +44,6 @@ direction: ltr | rtl;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1;">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view class="demo-box">
@@ -96,9 +93,6 @@ direction: ltr | rtl;
           @confirm="inputChangeDirection"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/flex-basis.md

@@ -41,9 +41,6 @@ flex-basis: content | <'width'>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -207,9 +204,6 @@ flex-basis: content | <'width'>;
         </view>
       
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/flex-direction.md

@@ -53,9 +53,6 @@ flex-direction: row | row-reverse | column | column-reverse;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -182,9 +179,6 @@ flex-direction: row | row-reverse | column | column-reverse;
         <input-data :defaultValue="data.flexDirection" title="flex-direction 自定义值" type="text" @confirm="inputChangeFlexDirection"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>

package/data/uniappx/css/flex-flow.md

@@ -50,9 +50,6 @@ flex-flow: <'flex-direction'> || <'flex-wrap'>;
 >示例
 ```vue
 <template>
-  
-  <scroll-view style="flex: 1">
-  
     <view style="flex-grow: 1">
       <text class="uni-tips">说明：左边是正常版本，右边是拍平版本</text>
       <view>
@@ -213,9 +210,6 @@ flex-flow: <'flex-direction'> || <'flex-wrap'>;
           <input-data :defaultValue="data.flexFlow" title="flex-flow 自定义值" type="text" @confirm="inputChangeFlexFlow"></input-data>
       </view>
     </view>
-  
-  </scroll-view>
-  
 </template>
 
 <style>