3

:last-child疑似セレクターの使用時に問題に直面しています。

次のマークアップがあります。

   <div class="apply_container">
        <form class="margin">
            <div class="apply_inn border">
                <span>Tell me why you want the job?</span>
            </div>
            <div class="apply_inn">
                <span>Some other details</span>
            </div>
            <div class="apply_inn location">
                <span>Apply at a particular location</span>
            </div>
            <div class="form-actions">
                <button type="submit" class="pull-right btn btn-info">
                    Submit
                </button>
            </div>
        </form>
    </div>

そして、これらのスタイルを適用します:

.apply_container .apply_inn {
    border-bottom: 1px dashed #E6E6E6;
    margin: auto;
    padding: 18px 0;
    width: 790px;
}

.apply_container .apply_inn:last-child {
    border:none;
}

私の目標は、ラストが残りのs のようdiv.apply_innにスタイルされないようにすることです。スタイルが適用されていないようです。誰が何が起こっているのか説明できますか?bottom-borderdiv.apply_inn

これが私の問題の元のフィドルです。問題を示す単純化されたフィドルと同様に。

4

4 に答える 4

5

問題は、divwith クラスがその親内に.apply_innないことです。last-childCSSlast-child疑似クラスは次のように動作します。

:last-child CSS 疑似クラスは、親要素の最後の子要素である要素を表します。

文字通り準備ができたら、親内の最後の子である要素にのみ適用されます。追加のクラスセレクターを追加するときに (精神的に) 作成するコンテキストは考慮されません。

疑似クラスを適用すると、ブラウザーはセレクターによって作成されたコンテキストを認識しません。基本的に、要素が selector と一致することを確認してから.apply_container .apply_inn、「これは親内の最後の子ですか?」という質問をします。前述のセレクターを考慮せずに、この質問をします。あなたの場合、最後の div の後に別の div があるため、答えはノーdiv.apply_innです。

あなたの例では、クラスを持つ divform-actionsは実際には最後の子です。

于 2013-03-21T09:41:22.110 に答える
2

セレクターが親コンテナーの最後の子である場合にのみセレクターを使用できますlast-child-それはそのクラス名の最後の子でした​​が、コンテナーの最後の子ではありませんでした

https://developer.mozilla.org/en-US/docs/CSS/:last-child

これは、最後の子スタイルが適用されたコードを示すフィドルです

http://jsfiddle.net/QSeU2/7/

于 2013-03-21T09:33:56.923 に答える
0

を対象にしてborder-topを削除first-childするborder-top

http://jsfiddle.net/btevfik/QSeU2/6/

最後の子は機能しません。

于 2013-03-21T09:30:06.630 に答える
-1

関連:最後の子セレクターの使用

使いたくない理由

.location {border:none;}

?

于 2013-03-21T09:06:27.307 に答える