3

理解に苦しむ。

次の css を使用:

.bloc .field:nth-last-child(2){ ...some values... }

および次の html (まあ、haml) :

.bloc
    .field
    .field
    .field
    .field
    .clearfix

.clearfix div はセレクターでカウントされます。これから、適切な .field の div を具体的にスタイルすることはできません。

私にはバグのように思えますが、間違っているかもしれません。同様の問題が nth-child にも当てはまります。

4

4 に答える 4

4

ここでの大きな誤解は、フィルタリングを使用してどのように機能するか:nth-child()です。

.bloc .field:nth-last-child(2)意味： 「クラスが内部にある最後
から2番目の要素をすべて選択する」。.field.bloc


「内にある最後から2番目の.field要素をすべて選択する」という意味ではありません.bloc。

このことを理解すれば、セレクターをに変更することができます.bloc :nth-last-child(3)。

ただし、bažmegakapaの回答の2番目の段落は非常に理にかなっています。要素を削除して.clearfix、別のフロート封じ込め手法を使用する必要があります。「マイクロクリアフィックス」は良い選択です。別のオプションはに追加するoverflow: hiddenこと.blocです。

于 2012-06-12T13:55:35.947 に答える
3

clearfixdivを削除するだけです。:nth-last-child()およびセレクターは、:nth-last-of-type()期待どおりに機能しません。それらはクラス名を区別しません（最初は区別せず、後方から数えるだけで、2番目は要素タイプのみを区別します）。

何千ものクリアリング手法があり、そのうちのいくつかだけがマークアップを追加する必要があります。単にoverflow: hiddenまたはoverflow: autoコンテナ上。を使用できる場合:nth-last-childは、を使用するクリアリング手法を使用することもできます::after。

于 2012-06-12T13:46:03.157 に答える
2

の場合は、そのクラスの要素を選択してい:nth-last-child(2)ます。

.fieldと.clearfix要素に別のタイプを使用している場合は、を使用して、本当に必要なことを実現できます:nth-last-of-type()。

于 2012-06-12T13:36:21.990 に答える
-1

これを試してみてください、私にとって.clearの前のものを取得しているようです：

.bloc .field:nth-last-child(2) { color: #CC0000; }​

http://jsfiddle.net/clowerweb/Dp3yW/

于 2012-06-12T13:43:56.267 に答える