1

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

这是差异的示例：

Vanilla 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 模块重新插入：unitXofY在 HTML 中指定一个类将专门用于取代默认假设，但实际上我的选择器更强大，并且总是会覆盖指定的类.

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

4

2 回答 2

2

我能想到的最好的方法是: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 混合：

因为这是一个冗长的 hack，所以我将其打包为 SASS mixin：

@mixin increase-specificity( $depth: 1 ) {
    $sel : '';

    @while($depth > 0) {
        $sel   : $sel + ':nth-child(n)';
        $depth : $depth - 1;
    }

    &#{$sel} {
        @content;
    }
}
于 2013-03-06T16:39:27.287 回答
1

您可以根据需要多次重复类名以增加特异性，只要重复之间没有空格.className，就假定它适用于同一个元素。根据w3c 规范，“允许重复出现相同的简单选择器并确实增加了特异性”

因此，例如，您可以使用：

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

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

于 2014-03-06T09:36:32.430 回答