子およびコンテキストCSSセレクター。 子要素の疑似クラスcssですべての子要素を選択する方法

CSS子セレクター-これらはセレクターであり、他の（Batkiv）要素の拡張によって子である場合、静かな方法で要素にスタイルを追加するのに勝利します。 ネイティブ、子セレクター、ウェアハウスのセレクターと同様に、それらは単純なセレクター（クラス、識別子など）から形成されます。

そして再び、あなたが忘れたように、娘の要素は何ですか、そしてあなたがすでに知っていたお尻をすでに理解していると思います。

<тег1> <тег2>... <тег3><тег4>...

ワインは貢献度の第1レベルの中央にランク付けされているため、要素は別の要素との関係から子要素と呼ばれます。 私たちのお尻<тег2>і<тег3>єボトムス<тег1>、<тег4>-ツェドンカ<тег3> .

子セレクターは、記号 ">"で区切られた2つ以上の単純なセレクターで構成されます。ここで、最初に父親、次に子要素、次に子要素の娘というように示されます。 したがって、ヘッダーセレクターと同様に、ドキュメントツリーのパスが設定されます。 スタイルは要素が少ないザストソヴァニになり、任意のєのセレクターがリストに残ります。 ホット構文：

セレクター1>セレクター2（

彼らは「>」のサインの両側から攻撃しました、あなたはそれを塔の後ろに置くことができます、またはあなたはそれを置くことができます。

CSS子セレクターの使用例

ブラウザでの結果

段落1。

パラグラフ2。

そのお尻はあなたに2つの瞬間のために次の敬意を与えました。 ここには3つの要素がありますが、フレーム、ステップ、フィールドがあるのは2つだけです。 なんで？ もう一瞬。 最初の段落だけがテキストに青色を付けています。

インターネットエクスプローラ 6.0は子セレクターを理解しないので、古いブラウザーを改良してサイトを作成します。覚えておいてください。

HTMLテーブルの子セレクター

併置されたサイトの多くの初心者（場合によっては初心者でさえも）は、HTMLテーブルのさまざまな子セレクターに問題があります。 何をすべきかを理解するために、このような素晴らしいテーブルに驚嘆しましょう。

そして今、食べ物。 どうやって知っていますか、タグから中央に渡すために子セレクターの助けがどのように必要ですか？ このように軸を記述しなかった場合は、次のようにはなりません。

テーブル>tr>td（ akіst：値; akіst：値; ...）

そして、何を推測しますか？ やあ？ 右側では、明示的に記述されていない1つの要素を忘れた場合、すべてがHTMLスキンテーブルに目に見えない形で存在します。 新しいタグには言語タグがなく、開いたり閉じたりするだけなので、忘れがちです。 スピーチまでそう、 HTMLの便利屋私たちはあなたと一緒にヨガを経験しませんでした。本当にヨガをしている人にとって、必要に応じて紹介することはめったにありません。 さて、あなたはすでにそれがなるだろうと推測していると思います 正しいエントリとにかくお見せします。

テーブル>tbody>tr> td（ akіst：値; akіst：値; ...）

スピーチの前に、テーブルに表示されるneob言語タグを持つ要素だけでなく、そのような要素も含まれる場合があります。 実際には、「忘れの問題」はテーブル自体のせいにされることが最も多いので、それに対するあなたの敬意について話します。

宿題。

1. 0.9emのサイズのフォントArialを側面にインストールし、背景にします。
2. 見出しと段落の横に書いて、必要性を尊重するように見出しテキストのサイズと色を変更します。
3. これを言いましょう。そうすれば、サポートなしで青い色の大通りの側面の段落に中間なしで書くことができます。 エールとツォム、たとえばイタリックのタグで囲まれるように追加された場合、悪臭はすでにサポートと赤い色で表示される予定です。 繰り返しになりますが、スキンタグのスタイル、フレーム、オクレモ、普遍的な形状を規定する必要がないという事実に敬意を表します。 ヤク？ 考え。
4. 側面の右側に小さなメニューを作成して修正します。これには、ある程度の力と補助的な力が必要です。そこにあります。 この場合、メニューはブラウザのウィンドウの中央に留まるだけでなく、スクロールするとページの横に表示されないようにします。

考え 残りのアイテムレッスンはあなたにとって最も便利ですが、再びマスターポジションに戻ろうとしないでください。 宿題をするだけです。 そういえば、この項目はInternet Explorer 6.0では動作しないので、固定位置がわかりません。

誰かがよく知っていると思います CSSコンテキストセレクター。 悪臭は通常勝利を収めますが、レイアウトデザイナーにとって、さまざまなコンテキストセレクターが多くの問題を引き起こすことを知っているのは素晴らしいことです。 これは、要素の構造に同じ要素が多数ネストされている可能性があるためです。 また、ネストされたすべての要素ではなく、中央のない子要素に対してのみスタイルを設定する必要があります。 私が勝つための軸 CSSの子セレクター.

問題が顕在化するように、小さなお尻を持ってきましょう。 そんなものを持っていきましょう HTMLコード:

І私たちのリーダーrobitichervonimless " 別の段落コンテキストセレクターWikiの記述方法は次のとおりです。

コンテナp（
赤色;
}

それから私達の中で私達が必要としないchervonimi侮辱的な段落になります。 Tsezavdannyaはただ助けを誓う CSS子セレクター:

コンテナ>p（
赤色;
}

それがすべてです、今、私たちはchervonimが少なくなりました」 別の段落 Oskіlki同じ段落єの中間の子なし 。容器。 しかし " 第一段落є内部の子 divこの順序では、ワインの子セレクターを使用しないでください。

軸はこのように簡単に揺れますが、大きなマイナスが1つあります CSS子セレクター-悪臭はブラウザでは機能しません インターネットエクスプローラ。 Ztsієїは過失の領域でїхvikoristannyaを引き起こします。 エール、ここですぐに理解すれば、それが何を意味するのかがわかります デンマーク語タイプセレクターと何をすべきか。

こんにちは、新しい読者！ CSSセレクターのテーマを継続し、あなたの意見を広めたいと思います 子セレクターとコンテキストセレクターの説明、およびїх 後の分析、zastosuvannyaの論理の背後にあるOskіlkiは悪臭がさらに似ており、deakuvіdminnіstについて考えたいと思っています。

私の出版物では、さまざまなことについて報告しています CSSの種類セレクター：; そしてまた。 スピーチの前に、記事の残りの部分で、彼らは整理しました 別のを参照してください属性セレクター、組み込みツールを使用してHTMLおよびCSSコードをオンラインで変更することにより、理論上のタブを再検証する方法について説明したと報告されています。 グーグルクローム（）。 このような編集ツールは、Firefox用のFirebug（）を含むすべての一般的なブラウザの新しい変更である可能性があります。

あなたが見ることができるこの投稿の理論的な資料、roblyachi redag​​uvannya be-サイトのあらゆる側面！ 一部の人にとっては、F12と入力するだけです。これは、GoogleChromeの表示方法です。 Mozilla Firefox（）。 そして今、私は、お尻に、pタグの変更を紹介します 娘と文脈 CSSセレクター :

この段落には次のものが含まれます 書式設定タグemおよびstrong、テキストの見方 大胆なі イタリック体で.

上記の編集ツールを使用して、この段落をこの記事に直接挿入し、編集用のウィンドウの左側にテキストを挿入しました。その後、この段落のテキストがページの最上部に表示されました。

このHTML構造。 この段落は、今日の出版物の最後の段落になります。この例では、セレクター（コンテキストの子）がCSSルールに勝つという事実に応じて、テキストのフォーマットがどのように変化するかを示します。

娘は要素の名前であり、バトキフスキーの真ん中に真ん中のない腐敗の一種です。 最初のステップは、それらを介さずに続行することです。段落の付録にHTMLドキュメントのタグ階層を表示するかのように、画像を表示します。そのテキストはより明確に表示され、今日選択できます。

このような構造は、要素のツリーとも呼ばれます。 この小さなものでは、コンテナのネストが明確に示され、タグ間でrarchіchіchіvіdnosiniを転送します。 段落タグpє子要素の拡張子。 同時に、strongタグはdivの子ではないため、pコンテナ内で移動することができます。

子CSSセレクター

要素ツリーの子セレクターは、常に親要素の真ん中に直接配置する必要があります。この場合、CSSセレクターを作成するための構文は次のようになります。

スタイルはセレクター2までホバーされますが、その場合のみ、セレクター1の子として、要素ツリーのスクリーンショットを強調表示してプレゼンテーションを見てみましょう。 たとえば、構文に従って、次のルールを挿入できます。

em（色：緑;）

この規則は、段落の残りの部分の「斜体」で具体化されていますが、それ自体が曲線と曲線のemタグの間に配置されています。 emタグはpの子であり、中央に中央がない状態で配置されると、テキストが変更され、「イタリック」という単語が緑色に変わります。

それ以外の場合、emタグはpタグの直接のオーバーレイではありませんが、強力なタグウェアハウスの前に入ることができます。その後、「emおよび強力なフォーマットタグ」の段落は明確になりません。

コンテキストCSSセレクター

悪魔が立ち上がるようになりました、 CSSコンテキストセレクターとは。 サイトの反対側をレイアウトする場合、タグは多くの場合、一方が他方にネストされます。 このような要素のスタイルを正しく処理するために、任意のコンテキスト、星、名前に表示されるセレクターが選択されます。

CSSルールを停止するためだけに、子セレクターは親要素の中央（ネストの最初のレベル）の中央なしで言語を変更する必要があるという罪を犯します。コンテキストセレクターの場合、それは絶対に重要ではなく、ネストレベルがあるかどうかに関係なく停止できますが、要素の権限はお父さんのように渡されます。 これを使用すると、構文は次のようになります。

Bachimoと同様に、コンテキストセレクターはギャップで区切られた単純なセレクターで構成されています。 コンテキストセレクターの場合、2つ以上のネストを1つのタグに入れることができます。 次に、試した段落のCSSルールを配置します。これにカーソルを合わせます。

P'em（色：緑;）

バカイトのように、緑色のzabarvleniyaは、「イタリック」という単語であるemフォーマットタグの中央に配置された段落の一部のテキストだけでなく、他のemタグのテキストの2番目の部分もこれは、倉庫の前に強力なタグに含める必要があります。 子セレクターの制御への投資率が重要でないことは重要ではないコンテキストセレクターで支配する人々の場合になりました。 tsomuєでは、子とコンテキストセレクターの違いの原則。

段落のコンテキストセレクターと子セレクターの相互作用のもう1つの例を見てみましょう。 子とコンテキストセレクター用に次のCSSルールを記述しましょう。

Div em（色：赤;）em（色：緑;）

その場合、段落は次のように設計されています。

bachite、shmatochkaテキストのように、emタグでパッキングし、赤い色で強力なpofarbovaniyaであるため、コンテキストセレクタールールは新しいものに対して有効であり、emタグは強力なコンテナーとdivに配置され、ネストされます。レベルはすでに割り当てられているため、値はありません。

食べ物を非難する：なぜ「イタリック」という言葉が使われているのですか、なぜそれはemで具体化されているのですか、zabarvlenaは緑色ですか？ 新しいコンテキストセレクタールールの年齢は実際のものです。 ただし、段落テキストの場合、子セレクターのルールは有効であるため、子セレクターの場合、要素が仲介なしでpタグのウェアハウスに入る罪があることはあまり明確ではありません。

CSSでは、法律が優先されます。 CSSパワー、以下にあります。 トブトイン この特定のタイプに子セレクタールールは、以下のドキュメントのdivコンテナーのコンテキストセレクターのCSSスタイルシートの下にあります。 それに対して、「イタリック」という言葉は緑色になりました。 これらの月を覚えている場合、ルール「p> em（color：green;）」は機能しなくなり、「斜体」のテキストは赤になります。

このセレクターの主なタスクは、子要素の前の親の名前であるセレクターの名前と同じです。 子要素と父要素を接続する基本記号">"の助けを借りて後ろに見られます。 また、vartoは、vikoristanに単純なセレクターがあることを示します。 お尻として、次のコーディングを見てみましょう。

要素>ul（padding-top：20px;）

与えられたコーディングは、要素に入れられるリストの前に、20ピクセルの内部エントリが上端に配置されることを意味します。 「>」アイコンが付いたこのエントリの存在は、ルールが第1レベルの投資のリストよりも少ないことを示しています。

子要素セレクターの作業のレポート分析

子要素セレクターは、パッドセレクターの概念とパワーが似ています。 しかし、これらの作戦の監督の重要性を示しているので、それは米の特徴です。 ヘッダーセレクターを追加することで、すべての要素が拡張され、子セレクターのサブオーダースタイルが同じになるという事実は誤りです。

子セレクターのオペレーターの作業をより適切に評価し、攻撃するお尻を助けるために：

Div> p（色：＃ff0000; /*赤*/）

< div>Tsey行は、zamovchuvannyamのマザーブラックテキストになります。< span>この行は、歌姫の子タグである行を介して赤に変換されます。 < p>私はバチモの黒い文字を知っています。< span>ここで私のバチモも黒いシンボルであり、そのスパンの父はタグrです。

このお尻は、投資レベルまでの子セレクターのオペレーターのロボットを確認します。

子セレクターのひげスタン​​ドオペレーターのエイリアス

ヴァルトは何を見る 与えられた操作伝説的なInternetExplorer6の周りのすべてのブラウザでサポートされています。これほどユニークな有名なブラウザはほとんどないと思います。そのため、次の記事で説明する状況から外れるでしょう。

今zastosovuєtsya

プログラマーは、ネストされた要素に独自のスタイルを適用する必要がある場合、選択範囲の子要素セレクターに移動します。 また、このセレクターを選択すると、CSSを高速化して、ドキュメントの読みやすさを向上させることができます。 練習が示すように、操作の前に、操作はメニューが作成されたときに発生する可能性が最も高く、ドロップすることができます。

また、子要素セレクターは、以前は既知であった要素に一意のスタイルを割り当てるために使用されます。 言い換えると：

メイン>ヘッダー（ /*デザインはヘッドヘッダーの前に表示されなくなりました*/ }

ヘッダータグが記事の見出しを見るのに勝利した場合、このお尻は公平です。 このビューでは、デザインをメインヘッダーのみに設定し、他の行は含めません。 この手法により、一度識別子を一意にzastosuvanny zayvouし、より簡単なvag CSSファイルを検索して、より読みやすくすることもできます。

Pіdbivayuchipіdbags

このようにして、子要素のオペレーターを停止して、ドロップできるメニューのデザインだけでなく、ロボット検索ロボットへのインターネットリソースの小さな最適化も行うことができます。

部門の3番目の部分に到達しました。 ここでは、CSSで子要素のセレクターを選択する方法と、より正確な選択のためのいくつかの追加の疑似クラスについて学習します。

CSS子セレクター

前回の記事では、子要素を含め、HTMLドキュメントの要素間のネイティブリンクについて説明しました。 アプリケーションを見てみましょう。CSSで作成できるリンクの数です。

タグのスタイルを設定するかどうかを教えてください

焼きと娘の書流 、くっつかない

（例えば、

日付までの子会社