ホームページ > 記事 > ウェブフロントエンド > CSS3兄弟セレクターの構文は何ですか
CSS3兄弟セレクターの構文は何ですか
- WBOYオリジナル
- 2022-03-22 10:54:433412ブラウズ
CSS3 の兄弟セレクターの構文: 1. " " 兄弟セレクター、構文は「要素を指定して要素 {CSS コード} を選択する」です。このセレクターは、要素を選択した後の隣接する兄弟要素を表します。2、 「~」兄弟セレクター。構文は「指定された要素 ~ 選択要素 {CSS コード}」です。このセレクターは、要素の後の同じレベルにある指定されたすべての要素を表します。
このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 兄弟セレクターの構文とは何ですか
CSS3 兄弟セレクター (,~)
兄弟セレクターは、次と同じ要素を選択するために使用されます。要素 (element). 親要素内でその後に位置する兄弟要素。兄弟セレクターには、隣接兄弟セレクターと通常の兄弟セレクターの 2 種類があります。それらについては以下で説明します。
1. 隣接する兄弟セレクター
このセレクターは、プラス記号 " " を使用して前後の 2 つのセレクターをリンクします。セレクター内の 2 つの要素は同じ親を持ち、2 番目の要素は最初の要素のすぐ後に続く必要があります。
以下では、事例を使用して隣接兄弟セレクターの使用法を示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3紧邻兄弟选择器用法-http://web.itheima.com</title>
<style type="text/css">
p + h2{
color: green;
font-family: "宋体";
font-size: 20px;
}
</style>
</head>
<body>
<body>
<h2>《赠汪伦》</h2>
<p>李白乘舟将欲行，</p>
<h2>忽闻岸上踏歌声。</h2>
<p>桃花潭水深千尺，</p>
<h2>不及汪伦送我情。</h2>
</body>
</html>上記のコードでは、7 行目から 11 行目は、p 要素の直後にある最初の兄弟要素 h2 のスタイルを定義するために使用されます。構造からわかるように、p 要素の直後の最初の兄弟要素の位置はコードの 17 行目であるため、コードの 17 行目のテキスト内容が定義されたスタイルで表示されます。
2. 通常の兄弟セレクター
通常の兄弟セレクターは、前後の 2 つのセレクターを「～」で結びます。指定された要素の背後にあるすべての兄弟ノードを検索します。 以下では、以下に示すように、ケースを使用して通常の兄弟セレクターの使用法を示します。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3普通兄弟选择器~用法-http://web.itheima.com</title>
<style type="text/css">
p ~ h2{
color: pink;
font-family: "微软雅黑";
font-size: 20px;
}
</style>
</head>
<body>
<body>
<h2>《赠汪伦》</h2>
<p>李白乘舟将欲行，</p>
<h2>忽闻岸上踏歌声。</h2>
<h2>桃花潭水深千尺，</h2>
<h2>不及汪伦送我情。</h2>
</body>
</html>
css ビデオ チュートリアル)
以上がCSS3兄弟セレクターの構文は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。