CSS :global 的作用是什么

在本文中，我们将介绍 CSS 中的 :global （冒号全局）是如何工作的以及它的作用。

阅读更多：CSS 教程

什么是 :global？

在 CSS 中，:global 是一个类选择器，可以被用来声明一个全局作用的样式。通常情况下，CSS 样式只对它所在的组件或者元素生效，而 :global 则可以使得这些样式在全局范围内生效。

:global 的应用场景

在 React 中使用 :global

在 React 的应用开发中，我们经常需要使用第三方类库或者自定义全局样式。通常情况下，我们可以通过将样式文件引入到我们的组件中来实现这些样式的应用。然而，在某些情况下，我们需要在组件的层次结构之外生效的样式，这就是使用 :global 的场景之一。

例如，我们有一个自定义的组件 Button，它的样式定义如下：

.Button {
  color: blue;
}

如果我们想要在 Button 组件之外的其他地方也使用这个样式，我们可以使用 :global 来声明这个样式为全局样式：

:global(.Button) {
  color: blue;
}

这样一来，我们就可以在任何地方使用 Button 类并且应用样式。

在 CSS 模块化中使用 :global

在 CSS 模块化中，通常会将 CSS 样式文件与其他组件的 JavaScript 文件打包在一起，以便于组件的独立开发。这种方式可以防止 CSS 文件的冲突，并且使得样式的复用更加方便。

然而，有时候我们也需要一些全局样式来修饰整个页面。这时就可以使用 :global 来声明这样的样式。在 CSS 模块化中，使用 :global 来声明全局样式的方式如下：

:global {
  .globalStyle {
    /* 全局样式 */
  }
}

这样一来，我们可以在任何地方使用 .globalStyle 类来应用这个全局样式。

:global 的示例

示例一：在 React 中使用 :global

假设我们有一个自定义的组件 Button，我们希望这个 Button 的样式可以在组件外也能够生效。我们可以这样定义 Button 组件的样式：

:global(.Button) {
  color: blue;
}

然后，在其他地方使用该样式：

import React from "react";
import "./Button.css";

const App = () => {
  return (
    <div>
      <button className="Button">Click me</button>
    </div>
  );
};

export default App;

通过使用 className="Button"，我们可以在全局范围内应用 Button 样式。

示例二：在 CSS 模块化中使用 :global

假设我们有一个 CSS 模块化的样式文件，我们想要声明一个全局样式来设置页面的背景颜色。我们可以这样定义这个全局样式：

:global {
  .globalStyle {
    background-color: #f2f2f2;
  }
}

然后，在其他地方使用该样式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="globalStyle">
    <h1>Hello, world!</h1>
  </body>
</html>

通过使用 class="globalStyle"，我们可以在全局范围内应用 globalStyle 样式。