diff --git a/docs/guide/components-usage.en-US.md b/docs/guide/components-usage.en-US.md
index 960cd57f..b44d227e 100644
--- a/docs/guide/components-usage.en-US.md
+++ b/docs/guide/components-usage.en-US.md
@@ -16,11 +16,11 @@ By combining the hash selector of cssinjs, we can ensure that the styles of the
 
 ```less
 // style-1
-.css-abcd .my-btn {
+.css-abcd.my-btn {
   background: blue;
 }
 // style-2
-.css-dcba .my-btn {
+.css-dcba.my-btn {
   background: red;
 }
 ```
@@ -30,7 +30,7 @@ By combining the hash selector of cssinjs, we can ensure that the styles of the
 <button className="my-btn css-dcba">click</button> // -> red background
 ```
 
-However, this approach also brings a problem - the styles of the component will be elevated by the hash selector, making it difficult for users to override the styles: originally, users could override the styles by using `.my-btn`. But now, because the weight of `.css-abcd .my-btn` is higher, if the user only writes `.my-btn { color:green }`, this override style will not take effect.
+However, this approach also brings a problem - the styles of the component will be elevated by the hash selector, making it difficult for users to override the styles: originally, users could override the styles by using `.my-btn`. But now, because the weight of `.css-abcd.my-btn` is higher, if the user only writes `.my-btn { color:green }`, this override style will not take effect.
 
 So what to do? This is where the `:where()` selector comes in. It can be said to be a cornerstone of future component-level cssinjs.
 
@@ -39,12 +39,12 @@ So what to do? This is where the `:where()` selector comes in. It can be said to
 Let's take a look at the code:
 
 ```less
-:where(.css-abcd) .my-btn {
+:where(.css-abcd).my-btn {
   background: blue;
 }
 
 // The above code is equivalent to the selection scope
-.css-abcd .my-btn {
+.css-abcd.my-btn {
   background: blue;
 }
 ```
diff --git a/docs/guide/components-usage.zh-CN.md b/docs/guide/components-usage.zh-CN.md
index 588cd81f..8f0f1f4b 100644
--- a/docs/guide/components-usage.zh-CN.md
+++ b/docs/guide/components-usage.zh-CN.md
@@ -16,11 +16,11 @@ antd-style 的一开始使用对象是业务应用，因此在默认的设计上
 
 ```less
 // style-1
-.css-abcd .my-btn {
+.css-abcd.my-btn {
   background: blue;
 }
 // style-2
-.css-dcba .my-btn {
+.css-dcba.my-btn {
   background: red;
 }
 ```
@@ -30,7 +30,7 @@ antd-style 的一开始使用对象是业务应用，因此在默认的设计上
 <button className="my-btn css-dcba">click</button> // -> red background
 ```
 
-但是这样做也会带来一个问题 —— 组件的样式会被 hash 选择器抬升权重，此时用户要覆写样式就会变得很困难： 原本用户使用 `.my-btn` 就可以覆盖样式。但现在由于 `.css-abcd .my-btn` 的权重更高，因此用户如果只书写了 `.my-btn { color:green } ` ，这个覆盖样式是无法生效的。
+但是这样做也会带来一个问题 —— 组件的样式会被 hash 选择器抬升权重，此时用户要覆写样式就会变得很困难： 原本用户使用 `.my-btn` 就可以覆盖样式。但现在由于 `.css-abcd.my-btn` 的权重更高，因此用户如果只书写了 `.my-btn { color:green } ` ，这个覆盖样式是无法生效的。
 
 那怎么办？此时 `:where()` 选择器登场了，它可以说是未来组件级 cssinjs 的一个核心基石。
 
@@ -39,12 +39,12 @@ antd-style 的一开始使用对象是业务应用，因此在默认的设计上
 来看下代码：
 
 ```less
-:where(.css-abcd) .my-btn {
+:where(.css-abcd).my-btn {
   background: blue;
 }
 
 //上述代码在选择范围上等效于
-.css-abcd .my-btn {
+.css-abcd.my-btn {
   background: blue;
 }
 ```