HTML レイアウト ガイド: テーブル スタイル コントロールに疑似クラス セレクターを使用する方法
はじめに:
HTML テーブルは、Web デザインでよく使用される要素の 1 つです。 . データや情報を表示します。ただし、デフォルトでは、テーブルのスタイルは比較的シンプルで面白くない場合があります。表をより魅力的にするために、CSS を使用して表のスタイルを制御できます。この記事では、CSS 疑似クラス セレクターを使用してテーブル スタイルを制御する方法を、具体的なコード例も含めて詳しく紹介します。
:hover
(マウスのホバー時に選択)、:active
(アクティブ化されたときに選択)、および :visited
(訪問済みリンクの選択) です。等擬似クラス セレクターを使用して、特定の状態のテーブル要素のスタイルを制御できます。 <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>女</td> </tr> <tr> <td>王五</td> <td>35</td> <td>男</td> </tr> </table>
次に、疑似クラス セレクターを使用して、マウスオーバー時のテーブル行の背景色とテキストの色を制御します。これは、次の CSS コードを使用して実現できます。
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:hover { background-color: #f2f2f2; color: #000; }
この例では、表全体の幅を 100% に設定し、border-collapse
プロパティを使用して境界線を結合します。 th
要素と td
要素は左揃えに設定され、ある程度のパディングが含まれます。最も重要なのは、疑似クラス セレクター :hover
を使用してテーブルの行を選択し、マウス ホバー時の背景色とテキストの色を変更することです。
:hover
に加えて、スタイルを制御するために使用できる他の一般的に使用される疑似クラス セレクターがあります。テーブル。以下に例をいくつか示します。 #:first-child最初の子要素を選択します
tr:first-child { font-weight: bold; }
:last-child最後の子要素を選択します
tr:last-child { background-color: #f2f2f2; }
:nth-child特定の位置にある子要素を選択します。これは次のように設定できます。パラメータ n Interval
tr:nth-child(2n) { background-color: #f2f2f2; }
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } tr:hover { background-color: #ddd; color: #000; } th { background-color: #4CAF50; color: white; }
tr:nth-child(even) を使用して偶数行を選択し、それらの背景色を設定します。
:hover疑似クラスセレクターは、マウスホバー時の背景色とテキストの色を設定するために使用されます。
th 要素は、他のスタイル属性を使用して背景色とテキスト色を設定します。
CSS 疑似クラス セレクターを使用すると、HTML テーブルのスタイルを簡単に制御およびカスタマイズできます。マウスオーバーによる場合でも、特定の場所にある子要素による場合でも、擬似クラス セレクターを使用して詳細と美しさを追加できます。この記事が、擬似クラス セレクターをより適切に使用して HTML レイアウトのテーブル スタイルを制御できるようにするためのガイドとなれば幸いです。
以上がHTML レイアウト ガイド: テーブル スタイル コントロールに疑似クラス セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。