2012-04-20 7 views
2

私は:last-of-typeをそのような要素に適用しています。最終的なdiv.info(それは各記事の下の情報です)をhttp://www.elemovements.comに確認してください。それはなぜ機能しないのですか?:last-of-type疑似クラスが期待通りに動作しない

+11

は対照的に、「このサイトにアクセスし、それを把握する」好奇心から –

+0

を言うにコードを記入してください、なぜそこにありますそのページの 'head'の' div'要素..? –

+3

質問に関連するコードを投稿してください。理想的には**さらに**質問本体自体のコードに、問題の[jsFiddle](http://jsfiddle.net/api/post/jquery/1.7.1/)の例を追加してください。それは私たちがあなたを助けるのに役立ちます。 –

答えて

14

のクラスを持っていません。彼らはあなたのクラスセレクタまたは他のセレクタによってフィルタリングしません。

したがって、あなたの文:

私ははっきりなどである要素に:last-of-typeを適用しています。最終チェックアウトdiv.info

矛盾しています。その後、div.centerがあり、は、ではなく、divの最後のになります。

You cannot currently use CSS selectors to find your last div.info;余分なクラスを追加するか、JavaScriptを使用する必要があります。

div.info:last-of-type

div:last-of-type.info

:last-of-typediv、ない.infoに当たっている、と.info0に見出された結果を制限されます。この2

2

あなたは、CSSに関する最も一般的な誤解の1つを持っています。 CSSは左から右に読み取られませんが、右から左に読み取られます。

意味、ブラウザがdiv.info:last-of-typeを探しますので、ブラウザは次の順序で要素をフィルタします:それぞれのタイプ(タグ名)

    1. 最後の要素はinfo
    2. のクラスである持っていますa div

    あなたの要素は、この順番でこれらの条件を満たしていません。これは、情報のクラスで最後のdivかもしれないが、何の最後の要素は、擬似クラスの:nth-of-type()家族だけで、そのタグ名である要素のタイプ、見info

  • +0

    私は右から左への並べ替えがこのように適用されるとは思っていません(CSS4セレクタは@Zetaを混乱させません)。 - [this](http://stackoverflow.com/a/10108700/106224)と[ this](http://stackoverflow.com/a/5813672/106224)、特に最後の段落では、いくつかの単純なセレクタが特別に扱われ、すべてが厳密に右から左に行くわけではないことが明確になっています。 – BoltClock

    +0

    @ BoltClock'aaUnicorn:注目。私は誰かに '$($);'を使うことを誰にも言わせる前に今日はログオフする時が来たと思う... – Zeta

    +0

    @ BoltClock'saUnicorn:それはまさにそれがどういうものなのか。あなたが私に与えた答えは私の答えを承認するだけです。擬似要素が最初に読み取られ、要素のリストが絞り込まれて大幅にスキャンされます。それはパフォーマンスのために行われます。 –

    0

    は同じです。

    もう一つの例:

    .section.section-test:last-of-type

    が実際のように動作します:.section:last-of-type.section-test

    関連する問題