类选择器不起作用，但属性选择器 [class] 起作用

Question

目前，我有以下 css：

.menubar {
  width: 250px;
}

对我来说，它看起来很正常，但目前菜单栏的宽度仍然是屏幕的大小。然而，这：

div[class="menubar"] {
  width: 250px;
}

不知何故有效。我很困惑。如果 . 是一个类选择器，那为什么它不起作用？

另外，如果有帮助，我正在使用 ReactJS 和 React Bootstrap。

这是 .menubar 的代码：

<div className="menubar">
  <Nav defaultActiveKey='/' variant='pills' className='flex-column'>
    <Nav.Link href=''>Active</Nav.Link>
    <Nav.Link eventKey='link-1'>Link</Nav.Link>
    <Nav.Link eventKey='link-2'>Link</Nav.Link>
    <Nav.Link eventKey='disabled' disabled>
      Disabled
    </Nav.Link>
  </Nav>
</div>