13

:first-childおよび:last-child疑似セレクターを使用して特定の div を選択し:first-childていますが、チェックインしたどのブラウザーでも機能しません。

私は caniuse.com と css-tricks.com をチェックしましたが、コンセンサスは:first-childかなり広くサポートされているということで、私が気付いていないバグがあるのではないかと考えています。ローカル ノード サーバーでアプリを実行しています。css と html の両方を検証しました。動作を妨げる可能性のあるバグを知っている人は:first-childいますか?

HTML

<div class="col-md-6 blurbs">
 <label>NEWS</label>
 <div>
  <p>Lorem ipsum dolor spernatur aut odit aut fugit conse oluptate</p>
 </div>
 <div class="clearfix">
  <a class="pull-left">RSS</a>
  <a class="pull-right">MORE NEWS</a>
 </div>
 </div>

CSS

(動作していません)

.news .blurbs div:first-child{
    outline: 1px solid red;
    height: 260px;
    overflow: auto;
    margin-bottom: 10px;
}

（働く）

.news .blurbs div:last-child{
    outline: 1px solid red;
    width: 95%;
}
4

1 に答える 1

25

および疑似クラスは、親の最初/最後の子である要素を選択し:first-child、:last-child他の連鎖セレクターによってフィルター処理されるため、最初の子が ではないためdiv:first-child、実際には何にも一致しません。.blurbsdiv

目的の効果を得るために使用する必要があるのは、:first-of-type次のような疑似クラスです。

.news .blurbs div:first-of-type{
    outline: 1px solid red;
    height: 260px;
    overflow: auto;
    margin-bottom: 10px;
}

ここに実際の例があります

于 2013-11-12T21:45:03.950 に答える