如果在特定类或ID下应用css规则

Question

是否可以在类之下定义多个规则，而无需在每次之前编写类。例如：

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


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


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

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

Answer 1

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

时

你可以写下这个：

.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()。

Selectors Level 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缩短它，但最后它仍会编译为详细形式。