HTML レイアウト ガイド: テーブル スタイル コントロールに疑似クラス セレクターを使用する方法

HTML レイアウト ガイド: テーブル スタイル コントロールに疑似クラス セレクターを使用する方法

はじめに:
HTML テーブルは、Web デザインでよく使用される要素の 1 つです。 . データや情報を表示します。ただし、デフォルトでは、テーブルのスタイルは比較的シンプルで面白くない場合があります。表をより魅力的にするために、CSS を使用して表のスタイルを制御できます。この記事では、CSS 疑似クラス セレクターを使用してテーブル スタイルを制御する方法を、具体的なコード例も含めて詳しく紹介します。

1. 疑似クラス セレクターとは何ですか?
   CSS では、疑似クラス セレクターは、HTML 要素を選択するために使用される特別なセレクターです。これらは、特定の状態の要素を選択するために使用されます。一般的な疑似クラス セレクターは、:hover (マウスのホバー時に選択)、:active (アクティブ化されたときに選択)、および :visited (訪問済みリンクの選択) です。等擬似クラス セレクターを使用して、特定の状態のテーブル要素のスタイルを制御できます。
2. テーブル スタイル コントロールの例
   例を使用して、疑似クラス セレクターを使用してテーブルのスタイルを制御する方法を示します。次の HTML コードを使用して、単純なテーブルを作成します。

<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 を使用してテーブルの行を選択し、マウス ホバー時の背景色とテキストの色を変更することです。

3. その他の一般的に使用される疑似クラス セレクター
   :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;
  }

包括的な例
4. これは、疑似クラス セレクターと他のスタイル属性の組み合わせを使用して、スタイルを完成させる、より包括的な例です。 table:
   

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 レイアウトのテーブル スタイルを制御できるようにするためのガイドとなれば幸いです。

参考:

MDN Web ドキュメント - 疑似クラス: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

以上がHTML レイアウト ガイド: テーブル スタイル コントロールに疑似クラス セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。