时间戳

首页 > 解决方案 > 覆盖特定子项的 CSS-Grid 属性

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

问题描述

我是 CSS-Grid 主题的新手，我在GRID的帮助下为网站创建了一个标题，我创建了带有 logo 、 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适用于所有，即 logo 、 navbar 、 searchbar 、 button 。 我的问题是：我想将此justify-items:center属性覆盖为justify-items:flex-start仅用于导航栏。那么我可以为谁做这件事呢？

这是标题的屏幕截图：

这是标题的屏幕截图

标签： cssgridcss-grid

解决方案

如果你用纯 CSS 编写，你可以添加另一行更具体的，像这样

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

这将优先于您拥有的以前的 css 样式。一般来说，首先应用更具体的样式。

推荐阅读