CSS 兄弟セレクターで \' \' 記号はどのような役割を果たしますか?

CSS 兄弟セレクターにおける ' ' の意味

CSS では、' ' 記号は隣接する兄弟コンビネータを表します。別の特定の要素の直後に現れる要素を選択します。このセレクターは、特定の要素を特定の順序でターゲットにする場合に便利です。

例:

次の CSS ルールを考えてみましょう:

h2 + p { 
  font-size: 1.4em; 
  font-weight: bold;
  color: #777; 
}

ルール指定されたスタイルを任意の

に適用します。

の直後にある要素要素。

には影響しません。

など、他の要素の後に出現する要素。または <スパン>タグ。

イラスト:

<code class="html"><h2>Headline!</h2>
<p>The first paragraph.</p>  <!-- Selected -->
<p>The second paragraph.</p> <!-- Not selected -->

<h2>Another headline!</h2>
<blockquote/>
    <p>A quotation.</p>      <!-- Not selected -->
</blockquote/></code>

• 選択(1): 最初の

  要素は

  の直後に来ます。要素。

• 未選択 (2): 2 番目の

  要素は

  の直後にありません。要素;代わりに、

  が続きます。要素。

• 未選択 (3):

  blockquote 内の要素には

  がありません。

注:

隣接する兄弟コンビネータは、別の要素に続く要素を選択する一般的な兄弟コンビネータ '~' とは異なります。同じ親内のどこにでも。

以上がCSS 兄弟セレクターで \' \' 記号はどのような役割を果たしますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：ReactJS で高速ホバリングを処理し、不安定な動作を回避するにはどうすればよいですか? 次の記事：ボタンが「display: block」と「width: auto」でコンテナを満たすまで伸びないのはなぜですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1696

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1859

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1572

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1485

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1531

関連トピック

詳細>

• pr ショートカットキー
• ネットワークトポロジー
• windows.old とは何のファイルですか?
• Java ベースのオーディオ処理方法と実践
• Linux オペレーティング システムの概要
• Oracleでページネーションする方法
• dedecms の一般的なタグ
• pptで写真をスクロールさせる方法