| |
ここでは、一般的に使用されるセレクターと説明する内容をいくつか示します。
1) セレクターの前後: 通常、コンテンツと組み合わせて使用され、選択した要素の前後にコンテンツを追加します (要素内の innerHTML に追加されます)。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 h2:after { 8 content: "（在后面添加文字，可以指定样式）"; 9 color: blue;10 }11 </style>12 </head>13 <body>14 <p>显示效果：</p>15 <div id="main">16 <h2>第一个标题</h2>17 <p>第1个段落</p>18 <h2>第二个标题</h2>19 <p>第2个段落</p>20 <h2>第三个标题</h2>21 <p>第3个段落</p>22 </div>23 </body>24 </html>ログイン後にコピー
追加されていない要素がある場合は、それらの要素にクラスを設定し、そのコンテンツを none に設定できます。 h2.noadd:after { content: none; }
さらに、コンテンツを画像 URL (pathname.png) にすることの利点は、多くの内容を記述する必要がないことです。 img タグは、ショッピング リストの新しいアイテムや記事リストの新しい記事などによく使用されます。
コンテンツの役割を考えると、その重要な用途の 1 つはプロジェクトにシリアル番号を追加することであると誰もが考えるでしょう。シリアル番号を追加するには、コンテンツ内でカウンターを指定し、次にカウンター属性を定義するという 2 つのステップが必要です。ターゲット要素のスタイルシート内 (couter-increment や counter-reset など)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 h2:before { content: '第'counter(hcouter)'项'; color: red;} 8 h2 { counter-increment: hcouter; counter-reset: pcouter;} 9 p:before { content: '第'counter(pcouter)'段'; color: blue;}10 p { counter-increment: pcouter; }11 </style>12 </head>13 <body>14 <span>显示效果：</span>15 <div id="main">16 <h2>第一个标题</h2>17 <p>段落</p>18 <p>段落</p>19 <p>段落</p>20 <h2>第二个标题</h2>21 <p>段落</p>22 <p>段落</p>23 </div>24 </body>25 </html>ログイン後にコピー
ネスティングでは、サブプロジェクトの前に counter-reset を設定する必要があることに注意してください。下位プロジェクト番号のカウンター、それ以外の場合は上の 2 番目の見出しの下にあります。 段落は 4 から始まります。
2) ターゲット: ターゲット セレクターを使用して、ページ内のターゲット要素のスタイルを指定します (ID はページ内のハイパーリンクとして使用されるように設定されています)。スタイルは、ユーザーがリンクをクリックしてジャンプした後にのみ開始されます。ターゲット要素に適用されます。
3):nth-child(n),:nth-of-type(n): child と type の違いは、child は子要素を数えるときに型を区別しないのに対し、type は型を区別することです。例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 h2:nth-child(2) { background-color: blue; } 8 h2:nth-child(3) { background-color: grey; } 9 </style>10 </head>11 <body>12 <h2>第一个标题</h2>13 <p>第1个段落</p>14 <h2>第二个标题</h2>15 <p>第2个段落</p>16 <h2>第三个标题</h2>17 <p>第3个段落</p>18 </body>19 </html>ログイン後にコピー
ページには次が表示されます:
当初の意図は 2 番目と 3 番目の
タグの背景色を設定することでしたが、ブラウザによって与えられた結果により 2 番目の h2 が変更されました。灰色の背景に変更すると、3 番目の h2 はまったく効果がありません。これは、h2 親要素の子が型に分類されていないため、
も含まれます。この場合、 h2:child(2) は「
最初の段落
」となり、 h2:child(3) は「2番目のタイトル
」となります。 この問題を解決するには、:nth-of-type(n) を使用して要素の型を指定し、望ましい結果を得ることができます。
1 <style type="text/css">2 h2:nth-of-type(2) { background-color: blue; }3 h2:nth-of-type(3) { background-color: grey; }4 </style>ログイン後にコピー
さらに、(n) をパラメータ化してループ モードを実現することもできます。ループとしての x の数を指定するには、y は 1~x をとり、x のタイプを表します。 3n+1、3n+2、3n+3 (3n と省略できます) などのループ。 x=2の場合は奇数と偶数の項目となり、odd（奇数）またはeven（偶数）という言葉で表現できます。リストや表の背景色を交互に変えるシーンでよく使われます。切り替わった。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>各种选择器</title> 6 <style type="text/css"> 7 ul.lis { 8 width: 140px; 9 padding: 10px;10 margin: 0;11 }12 ul.lis li {13 list-style-type: none;14 white-space: nowrap;15 overflow: hidden;16 text-overflow: ellipsis;17 }18 ul.lis li:nth-child(odd) { background-color: aquamarine; }19 ul.lis li:nth-child(even) { background-color: burlywood; }20 </style>21 </head>22 <body>23 <span>显示效果：</span>24 <div id="main">25 <ul class="lis">26 交替显示列表项目27 <li>列表项目1，奇数项目背景色</li>28 <li>列表项目2，偶数项目</li>29 <li>列表项目3</li>30 <li>列表项目4</li>31 </ul>32 </div>33 </body>34 </html>ログイン後にコピー
(3) UI ステータス擬似クラス セレクター
CSS3 も 11 の UI 要素ステータス擬似クラス セレクターを提供しますが、以下に示すように、ブラウザーごとに UI 要素ステータス セレクターのサポートが異なります。
これらのセレクターの大部分は PC 側用に特別に設定されており、主にいくつかの動的フォームで使用されます。画面サイズとインタラクティブなエクスペリエンスを考慮すると、モバイル ページで一度に表示されるフォーム要素はできる限り少なくする必要があります。これは、モバイル側での入力フォームのエクスペリエンスが比較的悪いためです (実際、PC 側も同様です!)。 。そのため、小さな内容ではあまり堅苦しいことは必要ありません！
(4) ユニバーサル兄弟要素セレクター 使用形式: 子要素 1 - 子要素 2 {スタイルコンテンツ}
返されるのは、子要素 1 の後に要素 1 と同じレベルにあるすべての子要素 2 です。ここには 2 つの選択ルールがあります。同じレベルの要素 1 の背後と子要素 2 です。
要約: セレクターのルールはそれほど多くなく、使用法は非常に簡単です。難しいのは、適切なセレクターの組み合わせを選択する方法です。上記のセレクターの利点は正確な配置ですが、同時に、後で要素を追加または削除するために構造を変更する場合、上記のセレクターを使用すると問題が発生する可能性があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
