CSSで最初の子要素を除外する方法

CSS で最初の子要素を除外する方法: 1. 疑似クラス セレクター ":not" を使用して除外; 2. "nth-of-type" または "nth-child" を使用して除外; 3. " " または "~" 兄弟セレクターを使用して、最初の要素を除くサブ要素を取得します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css は最初の要素を除く子要素を取得します

フロントエンド ページ開発では、css を使用して最初の要素を除く子要素を選択する必要があります。たとえば、各スパンの間に一定の距離を置きたい場合、各スパンに margin-left を設定することはできません。これにより、最初のスパンの前にギャップが生じ、組版に影響を及ぼします。次に、1つ目以外の子要素を取得するためのcssの実装方法をいろいろと解説していきます。

効果は次のとおりです:

デザインドック https://www.wode007.com/sites/ 73738.html

基本構造は次のとおりです:

<style>
.dom div{
    float: left;
    height: 150px;
    line-height: 150px;
    width: 150px;
    margin: 20px;
    background: #ccc;
    text-align: center;
    color:#fff;
}
</style>
 <div class="dom">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

方法 1: 疑似クラス セレクターを使用します:

<style>
.dom  div:not(:first-child){
	background:red;
}
</style>

説明:

:not (selector) セレクターは、指定された要素/セレクターではないすべての要素と一致します。

:first-child セレクターは、親要素の最初の子要素に属する指定されたセレクターを選択するために使用されます。

方法 2: n 番目の型または n 番目の子を使用する

<style>
.dom div:nth-of-type(n+2){
background:red;
}
</style>

または:

<style>
.dom div:nth-child(n+2){
background:red;
}
</style>

説明:

n は 0 から始まり、次に n 2 は当然 2 番目の要素から始まりますので、同様に奇数の要素を選択する場合は 2n 1、偶数の要素を選択する場合は 2n 2 と書くと、状況に応じて使用できます。プロジェクトの状況。

[推奨学習: css ビデオ チュートリアル ]

方法 3: or~brother セレクターを賢く使用する

<style>
.dom div+div{
   background:red;
}
</style>

or :

<style>
.dom div~div{
  background:red;
}
</style>

説明:

セレクター: 別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。

~ セレクター: その機能は、指定された要素の背後にあるすべての兄弟ノードを検索することです。

これらはすべて div 要素であるため、最初の要素には兄弟要素がないため、最初の要素以外の子要素を取得できます。

以上がCSSで最初の子要素を除外する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。