为什么我的最后一个路由覆盖css在以前的路由?

Question

我正在构建一个简单的React SPA个人网站，并注意到路由器中稍后路由的CSS选择器会覆盖之前的路由，即使这些稍后的路由不是所讨论的页面。例如，这是我的app

function App() {
return (
<div className='App'>
<Router>
<NavBar />
<Routes>
<Route path='/' element={<Home />} exact></Route>
<Route path='/contact' element={<Contact />}></Route>
<Route path='/resume' element={<Resume />}></Route>
<Route path='/projects' element={<Projects />}></Route>
</Routes>
</Router>
</div>
);
}

但是，联系人页面的样式正在被简历页面覆盖。例如:font-size被重写

我意识到我可以使用类名来获得更高的特异性，但我想知道这种行为的根本原因是什么?

Answer 1

为每个h1标签使用不同的类。如果在任何文件中导入一次，所有CSS文件中的类和样式都适用于所有组件。所以只要改变CSS，并记住使用唯一的classname为所有你想要的样式元素