CSS减少了语法

我有这个代码，它有不同类型的选择器，我想知道如果它在更少的地方：

ul.sidebar-menu li a.active, 
ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}

ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    padding-left:30px;
}

ul.sidebar-menu li a { 
    font-size:1.1em; 
    padding:8px 0 8px 25px; 
    color: #888 
}

ul.sidebar-menu { 
    margin-top: 10px
}

我已经这么做了，但我不确定这是不是最好的办法。

---

谁能提供理论上的回答

您可以使用如下网站来检查此问题

ul.sidebar-menu li a.active,ul.sidebar-menu li a:hover,ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}
ul.sidebar-menu li a:hover,ul.sidebar-menu li a:focus {
    padding-left:30px;
}
ul.sidebar-menu {
    margin-top: 10px;
    li {
        a {
            font-size:1.1em;
            padding:8px 0 8px 25px;
            color: #888;
        }
    }
}

---

以下是用更少的资源编写的代码：

ul.sidebar-menu li a.active, 
ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    color: #1FB5AD;
    display: block;
}

ul.sidebar-menu li a:hover, 
ul.sidebar-menu li a:focus {
    padding-left:30px;
}

ul.sidebar-menu li a { 
    font-size:1.1em; 
    padding:8px 0 8px 25px; 
    color: #888 
}

ul.sidebar-menu { 
    margin-top: 10px
}

如果它看起来和你贴的非常相似，那是因为我没有改变任何东西

如果你想以嵌套的方式重写，那么你应该考虑如何组织更少的代码。 就我个人而言，我已经重写了所有代码来使用类，因为你在毫无理由地增加选择器的特殊性。将

ul

和

li

选择器留在那里只会使以后在您想要更改结构时变得更加困难

但要嵌套编写的代码，可以使用：

ul.sidebar-menu {
    li {
         a {
             &.active,
             &:hover,
             &:focus {
                 color: #1FB5AD;
                 display: block;
             }

             &:hover,
             &:focus {
                 padding-left: 30px;
             }

             color: #888;
             font-size:1.1em; 
             padding:8px 0 8px 25px; 
         }
    }

    margin-top: 10px;
}

---

我想你可以把李和。。。我想这不会有太大的区别，因为在这个世界上没有其他东西li@Huangism，虽然这是事实，但当您最终需要为

li

元素设置样式时，它将被证明是一个糟糕的选择。无论哪种方式，结构都是一个糟糕的选择，因为您应该避免一个以上的嵌套级别，并包括不必要的选择器。最好完全删除

li

选择器，但正如我在回答中所说的，我会使用类并将所有选择器的特异性保持在

0-0-1-0

。