增加CSS选择器的最简洁方法&x27；在不改变选择器作用域的情况下的类级特定性

我目前正在详细说明一个变体，它只需要一个容器类来确定直接后代的布局。我知道这需要注意的是，只在支持CSS3的浏览器中工作

下面是一个不同的例子：

一般规则：

我的规则：

另一个重要的警告是，假设一个元素的分数大小完全由它的同级数决定——而这正是这段代码的要点（为了实现更精简的HTML，而无需到处显示大小），在有些情况下，可能会希望有不相称的宽度

由于我的选择器的特殊性，我不能简单地将OOCSS模块插回：在HTML中指定

unitXofY

类将专门用来取代默认假设，但实际上我的选择器更强，并且总是会覆盖指定的类

---

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

我能想到的最好的方法是

：n子元素（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混音器：

因为这是一个冗长的黑客：

---

只要重复

.className

之间没有空格，就可以重复多次类名，以增加特殊性。假定类名应用于同一元素。根据“同一个简单选择器的重复发生是允许的，并且确实增加了特异性”

例如，您可以使用：

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

---

…这将应用于class属性中只有

size1of4

的任何元素，覆盖另一个选择器中只有3个类名或伪类的声明。

问题是

.size1of4.size1of4.size1of4.size1of4

仍然需要选择一个元素的类名。据我所知，

：nth child（n）

是影响任何元素（即，任何可能的元素都符合它）的最简洁的选择器。我理解这一点，但令人困惑的是，您自己的答案也使用了特定的类名。我只是说，如果您至少指定一次类名（正如您所做的那样：

.size1of4

），您可以在不降低通用性的情况下指定任意多次。好的，我明白您的观点–您的方法基本上是采用选择器最初使用的任何内容，并在必要时重复。我想这可以归结为对通用模式的偏好，不能与具体情况混淆。但是，我也可以想象有人更快地摸索你的方法（而不是坐在那里试图弄清楚那些

：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%;
}

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

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

    &#{$sel} {
        @content;
    }
}

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