在单个div中组css标记

Question

我对同一个div中的不同标签有一堆不同的CSS编辑，想知道是否有办法将它们分组到一个div下？这就是我现在所拥有的：

#nav{
    margin: 8px auto 0px auto;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 3px 3px rgba(0,0,0,0,0.4);
}

#nav li{
    display: inline;
    padding: 10px;  
}

#nav ul{
    list-style-type: none;
    padding: 0px;
    margin: 10px 5px auto 5px;
    height: 20px;
    line-height: 10px
}

#nav a{
    text-decoration: none;
}

我尝试将它们放在单个#nav的大括号内，但它没有用。

Answer 1

如果我正确地解释了您的问题，那么纯CSS中的快捷方式是不可能的。您可能希望查看SASS或LESS，它们是CSS的元语言，这意味着有效的CSS是有效SASS / LESS的子集。这两个都支持构造

#nav{ 
    thing: example; 
    .child { more: styles; }
    .extra { style: great; } 
}

将其解释为CSS

#nav {
    thing: example; }

#nav .child { more: styles;}

#nav .extra { style: great;}