CSSで最初の子要素を除外する方法-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2022-08-29 18:28:32

オリジナル

9425 人が閲覧しました

4 メソッド: 1. ":not()" および ":first-child" を使用します。構文は "element:not(:first-child){style}" です。 2. ":nth" を使用します。 - of-type"、構文は「Element:nth-of-type(n 2){style}」です; 3.「:nth-child」を使用します、構文は「Element:nth-child(n 2){ style}"; 4. セレクター「」または「~」を使用し、構文は「要素要素 {スタイル}」または「要素 ~ 要素 {スタイル}」です。

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

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css の最初の子要素を除外する 4 つの方法

方法 1: セレクターを使用します: not() と: first- child

先頭の子を使用して最初の要素を選択し、
を使用してから :not()最初の子要素ではない他の要素と一致します

例: 最初の子要素を除く他の要素に赤い背景を追加します

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			.dom div {
				float: left;
				height: 150px;
				line-height: 150px;
				width: 150px;
				margin: 20px;
				background: #ccc;
				text-align: center;
				color: #fff;
			}
			.dom  div:not(:first-child){
			
			    background:red;
			
			}
		</style>
	</head>

	<body>
		<div class="dom">
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</div>
	</body>

</html>

ログイン後にコピー

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

説明:

:not(selector) セレクターは、指定された要素/セレクターではないすべての要素と一致します。
:first-child セレクター指定されたセレクターは、親要素に属する最初の子要素を選択するために使用されます。

方法 2: :nth-of-type()

:nth-of- を使用するtype(n) セレクターは、親要素の特定の型の N 番目の子要素であるすべての要素と一致します。

n は 0 から始まり、n 2 は当然のことながら Start です2番目の要素で。

.dom div:nth-of-type(n+2){
background:pink;
}

ログイン後にコピー

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

同様に、奇数の要素を選択する場合、 は 2n 1 であり、偶数の要素を選択する場合は、次のようにする必要があります。 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。

.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}

ログイン後にコピー

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

方法 3: :nth-child()

:nth-child(n ) セレクターは、要素の型に関係なく、その親要素に属する N 番目の子要素と一致します。

メソッド 3 およびメソッド 2 タイプの場合は、() の値を「n 2」に設定するだけです。

.dom div:nth-child(n+2){
background:green;
}

ログイン後にコピー

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

方法 4: 兄弟セレクターまたは ~

# セレクター: 別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。
~ セレクター: その機能は、指定された要素の背後にあるすべての兄弟ノードを検索することです。

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

.dom div+div{
   background:red;
}

ログイン後にコピー

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

.dom div+div{
   background:peru;
}

ログイン後にコピー

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

（学習ビデオ共有:

Web フロントエンドの入門）

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