数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 设置交替表格行颜色？
使用 CSS 设置交替表格行颜色，也称为斑马条纹。它有助于提高表格的可读性，因为更容易区分不同的行。
在这篇文章中，我们将了解四种不同的方法来使用 CSS 设置交替表格行颜色。我们有一个 5*2 的表格，我们的任务是使用 CSS 设置交替表格行颜色。
设置交替表格行颜色的方法
以下是使用 CSS 设置交替表格行颜色的方法列表，我们将在本文中逐步讲解并提供完整的示例代码。
使用 nth-child 选择器设置交替行颜色
为了使用 CSS 设置交替表格行颜色，我们使用了 CSS nth-child() 选择器，它根据元素在其父元素子元素中的位置来选择元素。
- 我们使用 HTML table 标签创建了一个表格，使用 tr 标签创建了五行，使用 th 标签创建了一个表头，并使用 td 标签填充表格数据。
- 我们使用元素选择器来设置表格样式，例如设置表格的 宽度，设置标题的 背景颜色 和文本 颜色，以及设置表格数据的 填充、边框 和 文本对齐。
- 我们在 tr 上使用了 "tr:nth-child(even)" 选择器，它选择所有偶数行并更改其背景颜色。
- 我们在 tr 上使用了 "tr:nth-child(odd)" 选择器，它选择所有奇数行并更改其背景颜色。
- 我们还可以使用数学表达式，例如偶数行用 2n，奇数行用 2n+1，而不是在 nth-child 选择器的参数中使用 even 和 odd。
示例
这是一个完整的示例代码，它实现了上述步骤，使用 CSS nth-child 选择器设置交替表格行颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-child(even) {
background-color: #c8e6c9;
}
tr:nth-child(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-child
</strong> psuedo-class selector to set
alternate table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用 nth-of-type 选择器设置交替行颜色
在这种方法中，我们使用了 CSS nth-of-type伪类选择器，它类似于 nth-child 选择器，并根据元素在其相同类型（标签名称）的兄弟姐妹中的位置来匹配元素。
- 首先，我们创建并设计了一个 5*2 的表格，与第一种方法相同。
- 我们使用了 "tr:nth-of-type(even)"，它选择所有 tr 标签并更改偶数行的背景颜色。
- 我们使用了 "tr:nth-of-type(odd)"，它选择所有 tr 标签并更改奇数行的背景颜色。
示例
这是一个完整的示例代码，它实现了上述步骤，使用 CSS nth-of-type 选择器设置交替表格行颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:nth-of-type(even) {
background-color: #c8e6c9;
}
tr:nth-of-type(odd) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>nth-of-type
</strong> psuedo-class selector to set alternate
table row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用类选择器设置交替行颜色
在这种设置交替表格行颜色的方法中，我们使用了基本方法，为每个 tr 标签使用两个类，即 even 和 odd。
- 首先，我们创建并设计了一个 5*2 的表格，与第一种方法相同。
- 然后，我们使用 odd 类设置奇数行的背景颜色，使用 even 类设置偶数行的背景颜色。
示例
这是一个完整的示例代码，它实现了上述步骤，使用 CSS class 选择器设置交替表格行颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
.odd {
background-color: #e8f5e9;
}
.even {
background-color: #c8e6c9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>class
</strong> selector to set alternate table
row color using CSS.
</p>
<table>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr class="odd">
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr class="even">
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr class="odd">
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr class="even">
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr class="odd">
<td>Neha</td>
<td>9654321098</td>
</tr>
</table>
</body>
</html>
使用 not 选择器设置交替行颜色
在这种方法中，我们使用了 not() 伪类选择器来设置交替表格行颜色。它排除其参数中指定的元素。
- 我们在 tr 标签上使用了 "tr:not(:first-child):not(:nth-child(odd))"，其参数为 first-child 选择器和 nth-child 选择器，它不选择第一行和奇数行，也就是说，它只更改偶数行的背景颜色。
- 同样，我们使用了 "tr:not(:nth-child(even))"，它排除偶数行并设置奇数行的背景颜色。
示例
这是一个完整的示例代码，它实现了上述步骤，使用 CSS not 选择器设置交替表格行颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
To set alternate table row color using CSS
</title>
<style>
table {
width: 20%;
border-collapse: collapse;
}
th {
background-color: #04af2f;
color:white;
}
th,td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
tr:not(:first-child):not(:nth-child(odd)) {
background-color: #c8e6c9;
}
tr:not(:nth-child(even)) {
background-color: #e8f5e9;
}
</style>
</head>
<body>
<h3>
To Set Alternate Table Row Color Using CSS
</h3>
<p>
In this example we have used <strong>not</strong>
psuedo-class selector to set alternate table row
color using CSS.
</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ravi</td>
<td>7045689765</td>
</tr>
<tr>
<td>Amit</td>
<td>9876543210</td>
</tr>
<tr>
<td>Priya</td>
<td>9123456789</td>
</tr>
<tr>
<td>Sunil</td>
<td>8234567890</td>
</tr>
<tr>
<td>Neha</td>
<td>9654321098</td>
</tr>
</tbody>
</table>
</body>
</html>
结论
在这篇文章中，我们了解了如何使用 CSS 设置交替表格行颜色。我们讨论了四种不同的方法来设置交替表格行颜色：使用 CSS nth-child 选择器、使用 CSS nth-of-type 选择器、使用 CSS class 选择器和使用 CSS not 选择器。在这四种方法中，nth-child 和 nth-of-type 是最常用的方法。
更新于：2024年8月20日
9K+ 浏览量
广告