diff --git a/website/docs/en/guide/styling/css-modules.mdx b/website/docs/en/guide/styling/css-modules.mdx
index a57451520d..0ae872e13d 100644
--- a/website/docs/en/guide/styling/css-modules.mdx
+++ b/website/docs/en/guide/styling/css-modules.mdx
@@ -118,6 +118,40 @@ export default {
 
 If you need to customize other configs of CSS Modules, you can set them via [output.cssModules](/config/output/css-modules).
 
+## Global styles
+
+In some cases, you may need to use global styles in CSS Modules, such as overriding the styles of third-party libraries or setting global styles for specific elements.
+
+CSS Modules provides the `:global()` pseudo-class selector to achieve this functionality, and the selectors inside `:global()` will remain the original class names, allowing them to correctly match global elements.
+
+```css title="styles.module.css"
+/* Local selectors, will be hashed */
+.container {
+  padding: 20px;
+}
+
+/* Global selectors, will not be hashed */
+:global(.foo) {
+  color: red;
+}
+
+/* Use local and global selectors together, only .wrapper will be hashed */
+.wrapper :global(.bar) {
+  margin: 10px;
+}
+```
+
+You can also nest `:global()`:
+
+```css title="card.module.css"
+.card {
+  /* Only affects .btn elements inside .card */
+  :global(.btn) {
+    background: blue;
+  }
+}
+```
+
 ## Type declaration
 
 When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition:
diff --git a/website/docs/zh/guide/styling/css-modules.mdx b/website/docs/zh/guide/styling/css-modules.mdx
index 9690c064f6..08f4a43e68 100644
--- a/website/docs/zh/guide/styling/css-modules.mdx
+++ b/website/docs/zh/guide/styling/css-modules.mdx
@@ -118,6 +118,40 @@ export default {
 
 如果你需要自定义 CSS Modules 的其他配置，可以通过 [output.cssModules](/config/output/css-modules) 进行设置。
 
+## 全局样式
+
+在某些情况下，你可能需要在 CSS Modules 中使用全局样式，比如覆盖第三方库的样式，或者为特定元素设置全局样式。
+
+CSS Modules 提供了 `:global()` 伪类选择器来实现这个功能，`:global()` 内的选择器会保持原始的类名，使它能够正确地匹配全局元素。
+
+```css title="styles.module.css"
+/* 本地选择器，会被哈希化 */
+.container {
+  padding: 20px;
+}
+
+/* 全局选择器，不会被哈希化 */
+:global(.foo) {
+  color: red;
+}
+
+/* 组合使用本地和全局选择器，只有 .wrapper 会被哈希化 */
+.wrapper :global(.bar) {
+  margin: 10px;
+}
+```
+
+你也可以嵌套使用 `:global()`：
+
+```css title="card.module.css"
+.card {
+  /* 只影响 .card 内部的 .btn 元素 */
+  :global(.btn) {
+    background: blue;
+  }
+}
+```
+
 ## 类型声明
 
 当你在 TypeScript 代码中引用 CSS Modules 时，TypeScript 可能会提示该模块缺少类型定义：