3

私が理解していることから、指定されたターゲットの前後にコンテンツ:beforeを挿入します。:afterこの CSS スニペットの目的が何なのかよくわかりません。

*, *:before, *:after {
    -moz-box-sizing: border-box;
}
4

3 に答える 3

4

これにより、ボーダーボックスのサイズ変更が、すべての要素と、それらが生成する可能性のある疑似要素に適用され:beforeます:after。部分とは、任意の要素の*:before, *:afterそれぞれの疑似要素を意味します。

後でスタイルシートで特定の:before/:afterルールを作成すると、この宣言はそれらのすべての疑似要素に自動的に適用されるため、疑似要素ルールのすべてでそれを繰り返す必要はありません。つまり、カスケードは実際の要素の場合とまったく同じように疑似要素に対して機能します。同じものに一致する別のルールがある場合、それらが一致する限り、それらはすべて適用されます。

要素が実際に:beforeまたは:afterを生成するには、content以外のものでなければならないことに注意してくださいnone。指定した CSS だけでは、すべての要素が両方の疑似要素を自動的に生成するわけではありません。それらのいずれかをレンダリングする必要がある場合、ブラウザがボーダーボックスのサイズ変更を使用することを保証するだけです. 生成されたコンテンツがどのように機能するかについては、仕様を参照してください。

たとえば、次の CSS です。

*, *:before, *:after {
    box-sizing: border-box;
}

div:after {
    content: "hello";
}

divボーダーボックスのサイズ設定を持つの:after疑似要素になります。:after他の要素は疑似要素を生成しませんが、より多くの CSS ルールが導入された場合、それらはすべてユニバーサル ルールから同じボックス サイズになります。

box-sizing: border-boxまた、指定された CSS に接頭辞が含まれていない-moz-場合は、他のブラウザでも同じボックス サイズが適用されることに注意してください。この-moz-接頭辞は、バージョン 28 までの Firefox で使用されます (リリースされたばかりのバージョン 29 には unprefixed が付属していますbox-sizing)。この回答を参照してください。

于 2014-05-08T13:08:23.790 に答える
0

これは、すべての疑似要素 (:before、:after) を持つすべての要素に適用され、border-boxボックスのサイズ変更を使用します。

チェックの詳細については、box-sizingこちらをご覧ください: http://css-tricks.com/box-sizing/

このborder-box値により、最終的にレンダリングされたボックスが宣言された幅になり、境界線とパディングがボックス内でカットされます。

于 2014-05-08T13:07:53.303 に答える