1

私は現在、ニコールサリバンの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%;
}

もう1つの重要な注意点は、要素の小数サイズが兄弟の数によってのみ決定されるという仮定です。これがこのコードの重要なポイントです（あちこちで明示的なサイズなしでよりスリムなHTMLを有効にするため）が、必要に応じて例外があります。不均衡な幅を持つこと。

セレクターの特殊性のため、OOCSSモジュールを単純に元に戻すことはできません。HTMLでunitXofYクラスを指定することは、デフォルトの仮定に優先するために特別に行われますが、実際には、セレクターはより強力であり、指定されたクラスを常にオーバーライドします。 。

私が探しているのは、特異性の実際的な効果を制限することなく、これらのセレクターに取って代わる最も簡単な、または最もエレガントな方法です。つまり、クラス以外の選択された要素について、常に正しいとは限らないという仮定をしてはなりません。

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

セレクターは、前のセレクターより1だけ優先されるように、3回指定されます。つまり、を管理する次のルールよりも優先される可能性があり.size1of5ます。

SASSミックスインとして：

これは冗長なハックなので、SASSミックスインとしてパッケージ化しました。

@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*/}

...これは、class属性だけを持つすべての要素に適用さsize1of4れ、セレクターに3つのクラス名または疑似クラスしかない別の宣言をオーバーライドします。

于 2014-03-06T09:36:32.430 に答える