Bagaimana untuk memilih baris genap jadual dalam css3-tutorial css-php.cn

Bagaimana untuk memilih baris genap jadual dalam css3

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Lepaskan： 2021-12-14 17:34:53

asal

3448 orang telah melayarinya

Dalam css, pemilih "anak-anak()" boleh digunakan untuk memilih elemen baris bernombor genap pada jadual nilai dalam pemilih ialah " 2n", bilangan objek genap akan dipilih dan sintaksnya ialah "elemen baris jadual:nth-child(2n){kod gaya css;}".

Bagaimana untuk memilih baris genap jadual dalam css3

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara memilih baris genap jadual dalam css3

Dalam css, jika anda ingin memilih elemen baris genap jadual , anda perlu menggunakan pemilih "nth- child()".

:nth-child(n) pemilih sepadan dengan elemen anak Nth yang dimiliki oleh elemen induknya, tanpa mengira jenis elemen itu.

n boleh menjadi nombor, kata kunci atau formula.

Apabila nilai dalam pemilih ialah 2n, nombor genap elemen akan dipilih.

Contoh adalah seperti berikut:

<html>
<head>
<style> 
tr:nth-child(2n)
{
background:#ff0000;
}
</style>
</head>
<body>
<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
  </tr>
  <tr>
    <td>333</td>
    <td>444</td>
  </tr>
    <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
      <tr>
    <td>555</td>
    <td>666</td>
  </tr>
  <tr>
    <td>777</td>
    <td>888</td>
  </tr>
</table>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk memilih baris genap jadual dalam css3

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk memilih baris genap jadual dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!