ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSのプラス記号は何を意味しますか?

CSSのプラス記号は何を意味しますか?

藏色散人
リリース: 2021-11-17 15:54:38
オリジナル
6380 人が閲覧しました

CSS のプラス記号は " " で、隣接する兄弟の選択を示します。これを「隣接兄弟セレクター」と呼びます。このセレクターは、指定された要素の後ろにある隣接する兄弟要素を照合できます。

CSSのプラス記号は何を意味しますか?

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

CSS のプラス記号は何を意味しますか?

" " は、隣接する兄弟を選択するためのもので、「隣接兄弟セレクター」と呼ばれます。セレクターは、指定された要素の後ろにある隣接する兄弟要素を照合できます。

別の要素の直後にある要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接兄弟セレクターを使用できます。たとえば、h1 要素の直後に表示される段落の上マージンを増やしたい場合は、次のように記述できます:

h1 p {margin-top:50px;}

このセレクター内容: 「h1 要素の直後に表示される段落を選択します。h1 要素と p 要素には共通の親要素があります。」

CSSのプラス記号は何を意味しますか?

拡張情報:

隣接兄弟セレクターでは、隣接兄弟結合記号であるプラス記号 ( ) を使用します。注: 子コンバイナーと同様、隣接する兄弟コンバイナーの隣に空白を含めることができます。

div 要素には、順序なしリストと順序付きリストの 2 つのリストが含まれており、それぞれに 3 つのリスト項目が含まれています。リスト項目自体と同様に、2 つのリストは隣接する兄弟です。

ただし、最初のリストのリスト項目と 2 番目のリストのリスト項目は、隣接する兄弟ではありません。これは、2 セットのリスト項目が同じ親要素に属していないためです (これらはいとこであるとしか考えられません)。せいぜい)。

コンバイナーを使用すると、隣接する 2 つの兄弟の 2 番目の要素のみが選択されることに注意してください。次のセレクターを見てください:

li + li {font-weight:bold;}
ログイン後にコピー

上記のセレクターは、リスト内の 2 番目と 3 番目のリスト項目のみを太字にします。最初のリスト項目は影響を受けません。

他のセレクターとの組み合わせ:

隣接する兄弟コンバイナーは他のコンバイナーと組み合わせることもできます:

html > body table + ul {margin-top:20px;}
ログイン後にコピー

このセレクターは次のように解釈されます: 選択範囲はテーブル要素 Of の直後に表示されます。すべての兄弟 ul 要素と同様に、table 要素は body 要素に含まれており、body 要素自体は html 要素の子要素です。

推奨学習: 「

css ビデオ チュートリアル

以上がCSSのプラス記号は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート