css - 如果在特定的类或 id 下应用 css 规则

Question

是否可以在一个类下定义多个规则，而不必每次都编写该类。例如：

.container-class .id-1 // {rules}


.container-class .id-2 // {rules}


.container-class .id-3 // {rules}

是否可以避免.container-class每次都写？

Answer 1

仅当您使用 LESS 或 SASS 等预处理器语言时

使用 LESS 你可以这样写：

.container-class {

    .id-1 { }
    .id-2 { }
    .id-3 { }

}

达到你想要的。

你可以在这里阅读更多：http: //lesscss.org/

Answer 2

如果您所有元素的规则都相同，那么您目前可以做的是：

.container-class .id-1,
.container-class .id-2,
.container-class .id-3{
   /*...*/
}

有一个:any()可以使用的实验性质。

选择器级别 4 指定伪类:matches()。

.container-class :-moz-any(.id-1 .id-2 .id-3){
   /*...*/
}

/* standards compliant*/
.container-class :matches(.id-1 .id-2 .id-3){
   /*...*/
}

这个 atm 的问题是，您必须使用供应商前缀，这使得这有点无用，因为您必须将每个供应商前缀放入单独的规则块中。

如果您对这些元素有不同的规则，则无法对它们进行分组。您可以使用 LESS 或 SASS 将其缩短，但最终，它仍会编译为详细形式。