HTML レイアウトガイド: テーブルスタイルコントロールに疑似クラスセレクターを使用する方法-htmlチュートリアル-php.cn

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

王林

リリース： 2023-10-18 11:57:11

オリジナル

1296 人が閲覧しました

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

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

疑似クラスセレクターとは何ですか?
CSS では、疑似クラスセレクターは、HTML 要素を選択するために使用される特別なセレクターです。これらは、特定の状態の要素を選択するために使用されます。一般的な疑似クラスセレクターは、:hover (マウスのホバー時に選択)、:active (アクティブ化されたときに選択)、および :visited (訪問済みリンクの選択) です。等擬似クラスセレクターを使用して、特定の状態のテーブル要素のスタイルを制御できます。
テーブルスタイルコントロールの例
例を使用して、疑似クラスセレクターを使用してテーブルのスタイルを制御する方法を示します。次の 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 を使用してテーブルの行を選択し、マウスホバー時の背景色とテキストの色を変更することです。

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

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 サイトの他の関連記事を参照してください。