CSS 在Next.js中使用CSS模块针对纯元素进行定位

在本文中，我们将介绍如何在使用Next.js开发的项目中，使用CSS模块来针对纯元素进行定位和样式设置。CSS模块是Next.js的一个强大特性，它使得我们可以将CSS样式和组件逻辑封装在一起，使得代码更加模块化和可维护。

CSS模块在Next.js中的使用非常简单，我们只需要在CSS文件中添加.module.css的后缀，然后将样式文件导入到组件中即可。例如，我们有一个Button组件，我们可以创建一个Button.module.css文件来存放该组件的样式。

/* Button.module.css */

.button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

然后，我们在Button组件中引入CSS模块，通过给元素添加对应的类名来应用样式。例如：

// Button.js

import styles from './Button.module.css';

const Button = () => {
  return (
    <button className={styles.button}>
      Click me!
    </button>
  );
}

export default Button;

在上面的代码中，我们使用styles.button来引用Button.module.css文件中定义的.button类。这样，Button组件就会应用样式。

阅读更多：CSS 教程

针对纯元素的定位选择器

CSS模块除了可以方便地应用样式，还提供了一些针对纯元素的定位选择器。下面是一些常用的定位选择器示例。

:global选择器

:global选择器可以用于指定一个全局作用域的样式。By default, CSS Modules 组件中定义的样式都是作用于组件内部的，如果我们想要定义一个全局样式，可以使用:global选择器。

/* Button.module.css */

:global .highlighted {
  background-color: yellow;
  color: black;
}

在上述代码中，.highlighted样式会应用于所有使用该类名的元素，而不仅仅是Button组件内部。

:local选择器

:local选择器可以用于指定一个局部作用域的样式，它是CSS模块的默认行为，所以在大多数情况下不需要显式使用:local选择器。

/* Button.module.css */

.button {
  background-color: blue;
  color: white;
}

.highlighted {
  background-color: yellow;
  color: black;
}

在上述代码中，.button样式只会应用于Button组件内部的元素，而.highlighted样式会继续作为全局样式应用于所有使用该类名的元素。

:local和:global选择器的组合使用

我们还可以使用:local和:global选择器的组合来定义更复杂的样式规则。

/* Button.module.css */

/* 定位选择器 .button 只会作用于 Button 组件内部的元素 */
.button {
  background-color: blue;
  color: white;
}

/* 定位选择器 :global(.button) 只会作用于全局具有 .button 类名的元素 */
:global(.button) {
  background-color: yellow;
  color: black;
}

/* 定位选择器 .button 会作用于 Button 和 Text 组件内部的元素 */
.button, :global(.text) {
  font-size: 16px;
}

在上述代码中，.button样式会作用于Button组件内部的元素，:global(.button)样式会作用于全局具有.button类名的元素，.button, :global(.text)样式会同时作用于Button和Text组件内部的元素。