使用导航栏组件时 id 和类的区别?

Question

我在 React 中使用 NavBar 品牌子组件，并试图覆盖要display: inline-flexdisplay: inline-blockCSS 属性，因为它弄乱了我在 IE 中的徽标图像。出于某种原因，当我使用 className 在我的 CSS 中引用它时，它没有响应，但如果我使用 id 代替，它会按预期工作。这有什么原因吗？

<Navbar.Brand className='logo'> <img src={logo.png} className='logoimg' alt={logo} /></Navbar.Brand>不起作用<Navbar.Brand id='logo'> <img src={logo.png} className='logoimg' alt={logo} /></Navbar.Brand>作品

我有引用这个的 CSS 是

#logo {
display: inline-flex;
} 

Answer 1

使用浏览器检查工具，如 Firefox 检查器或使用 Chrome 检查。

这些是诊断 CSS 属性优先级问题的有用工具，例如此类问题。