diff --git a/style/web/components/breadcrumb/_index.less b/style/web/components/breadcrumb/_index.less
index f007f53469..83bb1b9317 100644
--- a/style/web/components/breadcrumb/_index.less
+++ b/style/web/components/breadcrumb/_index.less
@@ -33,7 +33,7 @@
         color: @breadcrumb-icon-color-current;
       }
     }
-    :not(@{prefix}-breadcrumb-item) >
+
     &:last-child {
       color: @breadcrumb-text-color-current;
 
@@ -89,15 +89,6 @@
     }
   }
 
-  @{prefix}-breadcrumb-item:last-child {
-    .t-breadcrumb__item {
-      color: @breadcrumb-text-color-current;
-      .@{prefix}-breadcrumb__separator {
-        display: none;
-      }
-    }
-  }
-
   &__inner {
     font: @breadcrumb-font-base;
     word-break: break-all;
@@ -217,4 +208,23 @@
       }
     }
   }
+
+  // web component
+  @{prefix}-breadcrumb-item-light-dom {
+    .@{prefix}-breadcrumb__item {
+      color: @breadcrumb-text-color-default;
+      .@{prefix}-breadcrumb__separator {
+        display: flex;
+      }
+    }
+
+    &:last-child {
+      .@{prefix}-breadcrumb__item {
+        color: @breadcrumb-text-color-current;
+        .@{prefix}-breadcrumb__separator {
+          display: none;
+        }
+      }
+    }
+  }
 }