nth-child()伪类选择器实现奇偶行背景色样式

最新推荐文章于 2023-07-17 17:08:20 发布

柠夏小白

最新推荐文章于 2023-07-17 17:08:20 发布

阅读量1.1k

点赞数

分类专栏：前端开发文章标签： html css3 前端

本文链接：https://blog.csdn.net/a2417841572/article/details/121241101

版权

前端开发专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS 伪类(Pseudo-classes)

今天首要讲解一下，怎么用CSS伪类选择器实现奇偶行背景色样式

  奇偶匹配
  :nth-child(odd)与 :nth-child(even)
  分别匹配序号为奇数与偶数的元素。
  奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

废话不多说，上代码诠释：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>nth-child()伪类选择器实现奇偶行显示不同背景色样式</title>
    <!-- <link rel="stylesheet" href="./bootstrap.css" /> -->
    <style>
      /* 偶数行背景使用样式 even等同于 2n */
      table tr:nth-child(even) {
        background: cadetblue;
      }
      /* 奇数行背景使用样式 odd等同于 2n+1 */
      table tr:nth-child(odd) {
        background: red;
      }
      /* 表头背景色 */
      tr th {
        background-color: sandybrown;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>地址</th>
        <th>身高</th>
      </tr>
      <tbody>
        <tr>
          <td>小明</td>
          <td>11</td>
          <td>男</td>
          <td>湖南</td>
          <td>156</td>
        </tr>
        <tr>
          <td>小柏</td>
          <td>14</td>
          <td>男</td>
          <td>大理</td>
          <td>160</td>
        </tr>
        <tr>
          <td>小李</td>
          <td>21</td>
          <td>女</td>
          <td>湖南</td>
          <td>169</td>
        </tr>
        <tr>
          <td>小青</td>
          <td>18</td>
          <td>女</td>
          <td>湖北</td>
          <td>158</td>
        </tr>
        <tr>
          <td>可乐</td>
          <td>14</td>
          <td>男</td>
          <td>天津</td>
          <td>157</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果如下：

在这里插入图片描述

柠夏小白

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
nth-child()伪类选择器实现奇偶行背景色样式

CSS 伪类(Pseudo-classes)今天首要讲解一下，怎么用CSS伪类选择器实现奇偶行背景色样式奇偶匹配 :nth-child(odd)与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。废话不多说，上代码诠释：<!DOCTYPE html><html lang="en"> <head> <meta charse
复制链接

扫一扫