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. セレクター「 」または「~」を使用し、構文は「要素 要素 {スタイル}」または「要素 ~ 要素 {スタイル}」です。
このチュートリアルの動作環境: 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>
説明:
: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;
}
同様に、奇数の要素を選択する場合、 は 2n 1 であり、偶数の要素を選択する場合は、次のようにする必要があります。 2n 2;プロジェクトの状況に応じて特定の状況を使用できます。
.dom div:nth-of-type(2n+1){
background:pink;
}
.dom div:nth-of-type(2n+2){
background:green;
}
方法 3: :nth-child()
:nth-child(n ) セレクターは、要素の型に関係なく、その親要素に属する N 番目の子要素と一致します。
メソッド 3 およびメソッド 2 タイプの場合は、() の値を「n 2」に設定するだけです。
.dom div:nth-child(n+2){
background:green;
}
方法 4: 兄弟セレクター または ~
- # を使用します。
# セレクター: 別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接する兄弟セレクターを使用できます。~
セレクター: その機能は、指定された要素の背後にあるすべての兄弟ノードを検索することです。
.dom div+div{
background:red;
}
.dom div+div{
background:peru;
}
Web フロントエンドの入門 ）
以上がCSSで最初の子要素を除外する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 中国語版
中国語版、とても使いやすい
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
