如何在Next.js中应用CSS ID选择器？新手实操求助

Next.js里用ID选择器和纯HTML/CSS的逻辑完全一致，你的样式不生效大概率是样式导入方式不对，或者没搞清楚CSS模块化的规则。下面给你两种常用场景的具体代码示例：

场景1：全局SASS样式（适合全站通用的ID样式） #

如果你的Navbar样式是全站通用的，直接把SASS文件作为全局样式导入即可：

1. 创建全局SASS文件

// styles/globals.scss
#main-nav {
  background-color: #2c3e50;
  padding: 1rem 2rem;
}

#logo-link {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

#nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

#nav-menu li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

#nav-menu li a:hover {
  color: #3498db;
}

2. 在_app.js/_app.tsx中导入全局样式

// pages/_app.js
import '../styles/globals.scss'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

3. Navbar组件中直接使用ID

// components/Navbar.js
export default function Navbar() {
  return (
    <nav id="main-nav">
      <div className="nav-container">
        <a id="logo-link" href="/">My Logo</a>
        <ul id="nav-menu">
          <li><a href="/about">关于我们</a></li>
          <li><a href="/contact">联系我们</a></li>
        </ul>
      </div>
    </nav>
  )
}

场景2：CSS Modules模块化SASS样式（适合组件局部样式） #

如果你的Navbar样式只想作用在当前组件，用CSS Modules时要注意：ID选择器不会被模块化哈希处理，直接写在模块化文件里就能生效，类名才需要用styles.xxx的形式：

1. 创建组件专属的模块化SASS文件

// components/Navbar.module.scss
// 类名会被哈希，仅作用于当前组件
.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// ID选择器直接写，全局匹配页面上的对应ID元素
#main-nav {
  background-color: #2c3e50;
  padding: 1rem 2rem;
}

#logo-link {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
}

2. Navbar组件中导入并使用

// components/Navbar.js
import styles from './Navbar.module.scss'

export default function Navbar() {
  return (
    <nav id="main-nav">
      {/* 类名用模块化的styles对象调用 */}
      <div className={styles.navContainer}>
        <a id="logo-link" href="/">My Logo</a>
        <ul id="nav-menu">
          <li><a href="/about">关于我们</a></li>
          <li><a href="/contact">联系我们</a></li>
        </ul>
      </div>
    </nav>
  )
}

常见排查要点 #

• 检查样式文件是否正确导入：全局样式必须在_app.js里导入，模块化样式要在对应组件里导入
• 查看浏览器元素面板：检查ID对应的样式是否被其他样式覆盖（比如框架的!important），如果是可以用更高优先级的写法（比如#main-nav.nav-container）
• 避免在模块化文件里混用ID和未哈希的类名：如果要在ID选择器下嵌套类名，必须用模块化的类名（写在同一个模块化文件里）

内容的提问来源于stack exchange，提问作者Ryan Barillos