重写特定子级的CSS-Grid属性

Question

我是CSS-Grid主题的新手，我在网格的帮助下为一个网站创建了一个标题，创建了带有徽标、navBar、搜索栏、按钮和网格的标题。

.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;
}

现在这最后两个属性对齐-items和都适用于所有的(例如，徽标，导航栏，搜索栏，按钮)。我的问题是:我只想将这个justify-items:center属性重写为justify-items:flex-start for navBar。那么我能做什么呢？

以下是标题的屏幕截图：

​

​

Answer 1

如果您是用纯CSS编写的，您可以添加另一行更具体的内容，如

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

这将优先于先前的css样式。一般来说，更具体的风格是首先应用的。