CSS 一种引用以前的 div 样式以节省空间的方法？

Question

我正在用 CSS 制作一个简单的按钮，我需要制作 4 个按钮。我希望它们与我创建的第一个按钮具有相同的样式，但其中的文字不同。有没有一种方法可以将 nav1 样式引用到 nav2 中以节省空间？我希望这是有道理的。谢谢

#nav1
    {
        background-color:white;
        -webkit-transition: all .6s;
        width:90px;
        line-height:50px;
        text-align:center;
        font-family: sans-serif;
        font-weight: bold;
        border-radius: 5px;
        position:relative;
        top: 10px;
    }

#nav1:hover
        {
            background-color:black;
            color:white;
        }

#nav2
    {
        background-color:white;
        -webkit-transition: all .6s;
        width:90px;
        line-height:50px;
        text-align:center;
        font-family: sans-serif;
        font-weight: bold;
        border-radius: 5px;
        position:relative;
        top: 20px;
    }

#nav2:hover
        {
            background-color:black;
            color:white;
        }

Answer 1

是的。您可以将相同的 CSS 属性添加到多个 ID、类、元素，用逗号分隔它们:

#nav1,
#nav2,
..,
#nav100 {
    background-color:white;
    -webkit-transition: all .6s;
    width:90px;
    line-height:50px;
    text-align:center;
    font-family: sans-serif;
    font-weight: bold;
    border-radius: 5px;
    position:relative;
    top: 10px;
}

要仅更改一个属性，请覆盖它:

#nav2 {
    top: 20px;
}

但在您的情况下，您应该使用类:

.nav {
    ..
}

HTML:

<div class="nav"></div>
<div class="nav"></div>
...