覆盖特定子项的CSS-Grid属性

Question

我是CSS-Grid主题的新手，我在 GRID 的帮助下为网站创建了标题，在徽标，navBar，searchbar和带有网格的按钮上创建了标题

.header {
    height: 60px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 3fr 0.1fr 0.5fr;
    grid-auto-rows: 70px;
    align-items:center;
    justify-items: center;
}

现在这最后两个属性 align-items 和 justify-items 适用于所有徽标，导航栏，搜索栏，按钮。 我的问题是：我想覆盖此 justify-items：center 属性  仅针对navBar justify-items：flex-start 。那我该怎么办？

这是标题的屏幕截图：

Answer 1

如果您使用纯CSS编写，则可以添加另一条更具体的行，例如

.header .navBar {
    justify-items:flex-start;
}

这将优先于您以前使用的CSS样式。一般来说，首先会应用更具体的样式。