CSS 通过nth实现隔行换色

最新推荐文章于 2024-01-24 16:29:20 发布

小码锋

最新推荐文章于 2024-01-24 16:29:20 发布

阅读量4.8k

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/zhangfeng2124/article/details/66968958

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先上效果图：

实现代码：

<html>
<head>
<style>
.mytable{
  width:100%;
  border-collapse:collapse;
}
.mytable td{
   border:1px solid black;
}
.mytable tr:nth-child(2n){
  background-color: red;
}
.mytable tr:nth-child(2n-1){
  background-color: blue;
}
</style>
</head>
<body>
<table class="mytable">
  <tr>
    <td>1</td><td>2</td><td>3</td><td>4</td>
  </tr>
  <tr>
    <td>4</td><td>3</td><td>2</td><td>1</td>
  </tr>
  <tr>
    <td>5</td><td>6</td><td>7</td><td>8</td>
  </tr>
  <tr>
    <td>9</td><td>8</td><td>6</td><td>6</td>
  </tr>
</table>
</html>

nth-child(n)、 :nth-last-child(n)、 :nth-of-type(n)以及:nth-last-oftype(n)

例： nth-child(3n+1)——这样会从第一个元素开始，然后每三个元素选一个。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小码锋

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 通过nth实现隔行换色

先上效果图：实现代码：.mytable{ width:100%; border-collapse:collapse;}.mytable td{ border:1px solid black;}.mytable tr:nth-child(2n){ background-color: red;}.mytable tr:nth-child(2n-1){
复制链接

扫一扫