diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md
index 76cf74ff1a2ba398e10368702e5b615cc491e047..ce29e74618cd3dba101d99761a3df9f600ba4f6e 100644
--- a/packages/devui-vue/docs/components/back-top/index.md
+++ b/packages/devui-vue/docs/components/back-top/index.md
@@ -83,7 +83,7 @@ export default defineComponent({
 <template>
   <div class="devui-scroll-container">
     <ul class="devui-scroll-content">
-      <li class="item" v-for="(item, index) of list" :key="item">
+      <li class="backtop-demo-item" v-for="(item, index) of list" :key="item">
         {{ index + 1 + '. ' + item }}
       </li>
       <d-back-top
@@ -127,7 +127,7 @@ export default defineComponent({
   list-style-type: none;
 }
 
-.item {
+.backtop-demo-item {
   line-height: 35px;
   border-bottom: 1px solid #dfe1e6;
 }
diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
index e29350a2526ecc9ed487273c85a3045a615bc904..c2cf535934d850a3e04aa25caf66338fd9d4fac1 100644
--- a/packages/devui-vue/docs/components/card/index.md
+++ b/packages/devui-vue/docs/components/card/index.md
@@ -19,7 +19,7 @@
     <template #cardTitle>
       DEVUI Course
     </template>
-    <template #cardSubtitle class="icon">
+    <template #cardSubtitle class="card-demo-icon">
       <d-icon name="company-member"></d-icon><span>DevUI</span>
     </template>
     <template #cardContent>
@@ -40,13 +40,13 @@
 </template>
 <style lang="scss">
 @import '@devui-design/icons/icomoon/devui-icon.css'
-.icon {
+.card-demo-icon {
   cursor: pointer;
   font-size: 16px;
   margin-right: 8px;
   vertical-align: middle;
 }
-.icon + span {
+.card-demo-icon + span {
   vertical-align: middle;
 }
 .card-block {
diff --git a/packages/devui-vue/docs/components/popover/index.md b/packages/devui-vue/docs/components/popover/index.md
index 9270b4985f4dfbbbe59fba383df9820dc8b1bb50..5a70c3e6c630e61758d7772a025df797cccfa863 100644
--- a/packages/devui-vue/docs/components/popover/index.md
+++ b/packages/devui-vue/docs/components/popover/index.md
@@ -9,7 +9,7 @@
 :::demo
 ```vue
 <template>
-<div class="item" >
+<div class="popover-demo-item" >
   <d-popover visible>
     <template #reference>
       <d-button bsStyle="common">default</d-button>
@@ -43,7 +43,7 @@
 </div>
 </template>
 <style>
-.item > *{
+.popover-demo-item > *{
   margin-right:10px;
 }
 </style>
@@ -57,7 +57,7 @@
 
 ```vue
 <template>
-<div class="item">
+<div class="popover-demo-item">
   <d-popover content="自定义内容" >
     <template #reference>
       <d-button bsStyle="primary"> click me!</d-button>
@@ -72,7 +72,7 @@
 </template>
 
 <style>
-.item > *{
+.popover-demo-item > *{
   margin-right:10px;
 }
 </style>
@@ -200,7 +200,7 @@
 </div>
 </template>
 <style>
-.item > *{
+.popover-demo-item > *{
   margin-right:10px;
 }
 </style>
@@ -236,7 +236,7 @@
   </div>
 </template>
 <style>
-.item > * {
+.popover-demo-item > * {
   margin-right:10px;
 }
 </style>