在不改变选择器作用域的情况下提高CSS选择器类级特异性的最有效方法

Question

我目前正在阐述Nicole Sullivan的OOCSS网格模块的变化，该模块只需要一个容器类来确定直接后代的布局。我知道这需要注意，只能在支持CSS3的浏览器中工作。

这里有一个区别的例子:

香草OOCSS网格规则:

.unit1of4 {
    width: 25%;
}

我的简化网格规则:

.line > :nth-child(1):nth-last-child(4),
.line > :nth-child(2):nth-last-child(3),
.line > :nth-child(3):nth-last-child(2) {
    width:25%;
}

另一个重要的警告是，假设一个元素的分数大小完全由它的兄弟元素的数量决定——尽管这是这段代码的要点(在没有显式大小的情况下启用更精简的HTML)，但也会有一些例外，可能希望有不相称的宽度。

由于我的选择器的特殊性，我不能简单地把OOCSS模块放回去:在HTML中指定一个unitXofY类会特别取代默认的假设，但在实践中我的选择器更强，并且总是覆盖指定的类。

我正在寻找的是最简洁或最优雅的方式来取代这些选择器，而不限制特异性的实际效果。也就是说，除了它的类之外，它不能对所选元素做任何不总是正确的假设。

Answer 1

我能想到的最好的是:nth-child(n)，因为它解析为一个无意义的语句，翻译成简单的英语为'子元素'，这将始终是嵌套分数的情况。实现它的代码如下所示:

.line > :nth-child(1):nth-last-child(4),
.line > :nth-child(2):nth-last-child(3),
.line > :nth-child(3):nth-last-child(2),
.size1of4:nth-child(n):nth-child(n):nth-child(n) {
    width:25%;
}

选择器被指定3次，使得它胜过前面的选择器1，这意味着它也可以胜过下一个控制.size1of5的规则。

作为SASS mixin:

因为这是一个冗长的hack，我把它打包成一个SASS mixin:

@mixin increase-specificity( $depth: 1 ) {
    $sel : '';
    @while($depth > 0) {
        $sel   : $sel + ':nth-child(n)';
        $depth : $depth - 1;
    }
    &#{$sel} {
        @content;
    }
}

Answer 2

您可以随意重复类名以增加专一性，只要.className的重复之间没有空格，则假定它适用于同一元素。根据w3c规范，"允许重复出现相同的简单选择器，并增加特异性"

例如，你可以这样写:

.size1of4.size1of4.size1of4.size1of4{/*some styles*/}

…这将适用于任何在class属性中只有size1of4的元素，在其选择器中覆盖另一个只有3个类名或伪类的声明。