53

多くの場合、最初（または最後）を除くすべての要素にCSSスタイルを指定する必要があるのは自然なことです。たとえば、段落のスタイルを設定するときに、最後の要素を除くすべての要素に下マージンを追加します（または、同様に、最初の要素を除くすべての要素に上マージンを追加します）。

それを行う方法はありますか：

  • 定義p {...}してからp:first-child {...}？
  • ？よりも簡単で直感的ですp:nth-child(-n+1)か？

ない場合は、それを追加する試みを知っていますか？

4

4 に答える 4

105

最初の子を除くすべてのp要素について、次のいずれかを使用します（2番目の要素の方がサポートが優れています）。

p:not(:first-child)
p:first-child ~ p

p最後の子を除くすべての要素の場合：

p:not(:last-child)

p最初と最後の子を除くすべての要素の場合：

p:not(:first-child):not(:last-child)

いつものように、CSS3は、IE9+:not()および:last-child他のブラウザの比較的新しいバージョンまでサポートされていません。JavaScriptなどを使用して最初と最後の子にクラスを追加しない限り、ブラウザーのサポート（IE8以前）に関してはそれほど遠くまで到達することはありません。

インフロー段落とその祖先の間で垂直方向のマージンが折りたたまれることを忘れないでください。したがって、これらの段落のコンテナ要素のマージンもゼロにする必要がない限り、最初の段落とその祖先のマージンをゼロにする必要はありません。特に最後のp要素。これが説明するフィドルです。

于 2012-04-05T17:43:12.033 に答える
4

IE7-8のサポートが必要ない場合は、次のような:not()CSSセレクターを使用できます。

p:not(:first-child) {
    ...
}

ただし、IE7 +をサポートする必要がある場合は、それでも使用できる小さなトリックがあり、通常はかなり遠くまで到達できます。あまり知られていない事実は、:first-childpsuedoセレクターが実際にはIE7 +で機能することです（:last-childただし、他のcssセレクターとは異なります）。これにより、水平方向にフロートしたレイアウトに垂直方向のマージンを追加するなどのことが可能になります。

このhtmlを想像してみてください：

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

そしてこれをCSSとして：

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }

これで、すべてのリストアイテムが水平方向に隣り合って、右側または左側ではなく、すべてのアイテムの間にマージンを追加したいので、cssでこれを行うことができます。

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; margin-left: 10px; }
ul > li:first-child { margin-left: 0; }

これは通常、私が何かユニークなものが必要な場合の95％をカバーし、残りの「忘れられた」セレクターはさらに数パーセントをカバーします。その後、通常はバックエンドのボトルネックにはならないクラスを追加する必要があります。ページ。

于 2012-04-05T18:17:20.263 に答える
3

まあ、あなたはすることができます：

p:not(:first-child) {...}

:notただし、 psuedoクラスをサポートしているのは最新のブラウザのみです。

それ以外は違います。最善のオプションは、すべてのスタイルを指定してから、最初/最後のスタイルをオーバーライドすることです。

于 2012-04-05T17:42:38.650 に答える
3

私は使用することをお勧めしますfirst-of-type：

p:not(:first-of-type) { ... }

ブラウザのサポート（caniuse）

于 2014-04-25T11:12:48.787 に答える