Css 是否可以在较少的时间内定义和链接嵌套组

我想简化以下CSS规则：

.class > li > a:hover,
.class > li > span:hover,
.class > li > a:focus,
.class > li > span:focus,
.class > .active > a,
.class > .active > span,
.class > .active > a:hover,
.class > .active > span:hover,
.class > .active > a:focus,
.class > .active > span:focus {
  background-color: #ccc;
}

只有

.class > li > a:hover,
.class > li > span:hover,
.class > li > a:focus,
.class > li > span:focus {
  background-color: #ccc;
}

将允许：

.class > li {
  > a:hover, > span:hover, > a:focus, > span:focus {
    background-color:#cccccc;
  }
}

但我也有

.active

-小组，还有一些其他直接的孩子。我还可以定义并链接嵌套元素的组，例如：

.class {
  > li {> a:hover, > span:hover, > a:focus, > span:focus},
  > .active {> a, > span, > a:hover, > span:hover, > a:focus, > span:focus}
  {
    background-color:#ccc;
  }
}

---

您可以使用下面的

extend

扩展属性，也可以组合选择器

.class {
    > li {
        > a:hover, > span:hover, > a:focus, > span:focus {
            background-color:#cccccc;
        }
    }
    > .active {
        > a, > span, > a:hover, > span:hover, > a:focus, > span:focus{
            &:extend(.class > li > a:hover);
        }
    }
}

请注意，

extend

函数的参数应该具有完整的选择器路径，如

.class>li>a:hover

和just

li>a:hover

将不起作用

---

或者，您也可以对所有常用道具（如下所示）使用单独的规则集，并在两个位置使用它。然而，使用此方法会在编译的CSS中添加一个额外的选择器（

.common props

），但我想一行应该不会有太大区别

.class {
    > li {
        > a:hover, > span:hover, > a:focus, > span:focus {
            &:extend(.common-props);
        }
    }
    > .active {
        > a, > span, > a:hover, > span:hover, > a:focus, > span:focus{
            &:extend(.common-props);
        }
    }
}

.common-props{
      background-color:#cccccc;
}

---

甚至更简单您可以像下面这样做（我个人的偏好是）：

事实上，在这种情况下，“扁平”语法似乎已经是最简单的了（而试图通过嵌套构建它可能会完全无法读取，因为

li

和

.active

的差异）。在所有选择器中，都有足够的通用性，根本不需要考虑重复。在选择器4中（无论如何，一旦在未来几年内实现），这可以简化为

.class>li>：matches（a，span）：matches（：hover，：focus），.class>。active>：matches（a，span）：matches（*，：hover，：focus）

。（旁注，从技术上讲，

：matches（*，：hover，：focus）

在匹配元素方面是冗余的，因为

*

，但在特殊性方面不是冗余的，因为

：hover

和

：focus

）

.class {
    > li > a:hover, > li > span:hover, > li > a:focus, 
    > li > span:focus, > .active > a, > .active > span, 
    > .active > a:hover, > .active > span:hover,  
    > .active > a:focus, > .active > span:focus{
        background-color:#cccccc;
    }
}