diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 8ac38173c5f..197cdef3fc8 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -535,86 +535,12 @@
   }
 }
 
-// https://github.com/siyuan-note/siyuan/pull/12643
-// 删除给 .av__container 添加(更新) style="--av-background:var(xxx)" 的逻辑之后就可以删除 --av-background: 后面的 !important
-
-// 没有 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
-// Define a map of all backgrounds and their corresponding selected state
-$backgrounds: (
-  "font-background" 13,
-  "card-error-background" 1,
-  "card-warning-background" 1,
-  "card-info-background" 1,
-  "card-success-background" 1,
-);
-// Loop through each background to generate the corresponding styles
-@each $key, $count in $backgrounds {
-  @for $i from 1 through $count {
-    $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
-
-    [data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
-      --av-background: var(#{$bg-variable}) !important;
-    }
-  }
-}
-
-// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面
-@each $key, $count in $backgrounds {
-  @for $i from 1 through $count {
-    $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
-    $bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
-
-    [data-node-id][style*="background-color: var(#{$bg-variable})"] .protyle-wysiwyg--select .av__container,
-    [data-node-id][style*="background-color: var(#{$bg-variable})"] .protyle-wysiwyg--hl .av__container {
-      --av-background: var(#{$bg-select-variable}) !important;
-    }
-  }
-}
-
-// 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
-@each $key, $count in $backgrounds {
-  @for $i from 1 through $count {
-    $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
-    $bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
-
-    [data-node-id][style*="background-color: var(#{$bg-variable})"].protyle-wysiwyg--select .av__container,
-    [data-node-id][style*="background-color: var(#{$bg-variable})"].protyle-wysiwyg--hl .av__container {
-      --av-background: var(#{$bg-select-variable}) !important;
-    }
-  }
-}
-
-// 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 里面
 .protyle-wysiwyg--select {
-  // https://github.com/siyuan-note/siyuan/pull/12643
   .av__container {
     --av-background: var(--b3-av-background-hl) !important;
   }
-
-  $backgrounds: (
-    "font-background" 13,
-    "card-error-background" 1,
-    "card-warning-background" 1,
-    "card-info-background" 1,
-    "card-success-background" 1,
-  );
-
-  @each $key, $count in $backgrounds {
-    @for $i from 1 through $count {
-      $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
-      $bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
-
-      [data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
-        --av-background: var(#{$bg-select-variable}) !important;
-      }
-      &[data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
-        --av-background: var(#{$bg-select-variable}) !important;
-      }
-    }
-  }
 }
 .protyle-wysiwyg--hl {
-  // https://github.com/siyuan-note/siyuan/pull/12643
   .av__container {
     --av-background: var(--b3-av-background-hl) !important;
   }
@@ -629,23 +555,42 @@ $backgrounds: (
   .av__counter {
     transition: var(--b3-background-transition);
   }
+}
 
-  $backgrounds: (
-    "font-background" 13,
-    "card-error-background" 1,
-    "card-warning-background" 1,
-    "card-info-background" 1,
-    "card-success-background" 1,
-  );
-
-  @each $key, $count in $backgrounds {
-    @for $i from 1 through $count {
-      $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
-      $bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
+// https://github.com/siyuan-note/siyuan/pull/12643
+// 删除给 .av__container 添加(更新) style="--av-background:var(xxx)" 的逻辑之后就可以删除 --av-background: 后面的 !important
 
-      [data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
+// Define a map of all backgrounds and their corresponding selected state
+$backgrounds: (
+  "font-background" 13,
+  "card-error-background" 1,
+  "card-warning-background" 1,
+  "card-info-background" 1,
+  "card-success-background" 1,
+);
+// Loop through each background to generate the corresponding styles
+@each $key, $count in $backgrounds {
+  @for $i from 1 through $count {
+    $bg-variable: if($count == 1, "--b3-#{$key}", "--b3-#{$key}#{$i}");
+    $bg-select-variable: if($count == 1, "--b3-#{$key}-select", "--b3-#{$key}#{$i}-select");
+    // 没有 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 时按最近的父块背景色
+    [data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container {
+      --av-background: var(#{$bg-variable}) !important;
+    }
+    [data-node-id][style*="background-color: var(#{$bg-variable})"] {
+      // 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 外面
+      .protyle-wysiwyg--select .av__container,
+      .protyle-wysiwyg--hl .av__container,
+      // 带背景色的块 就是 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl
+      &.protyle-wysiwyg--select .av__container,
+      &.protyle-wysiwyg--hl .av__container{
         --av-background: var(#{$bg-select-variable}) !important;
       }
+    }
+    // 带背景色的块 在 .protyle-wysiwyg--select 或 .protyle-wysiwyg--hl 里面
+    .protyle-wysiwyg--select,
+    .protyle-wysiwyg--hl {
+      [data-node-id][style*="background-color: var(#{$bg-variable})"] .av__container,
       &[data-node-id][style*="background-color: var(#{$bg-variable})"] > .av__container {
         --av-background: var(#{$bg-select-variable}) !important;
       }