如何使用css创建斑马条纹表(create zebra striped tables with css)

为了使表格更易于阅读，使用交替背景色设置行的样式通常很有帮助。设置表格样式的最常用方法之一是设置每行的背景色。这通常被称为“斑马条纹”...

为了使表格更易于阅读，使用交替背景色设置行的样式通常很有帮助。设置表格样式的最常用方法之一是设置每行的背景色。这通常被称为“斑马条纹”

您可以通过使用CSS类设置每隔一行，然后定义该类的样式来实现这一点。这是可行的，但不是最好或最有效的方法。使用此方法时，每次需要编辑该表时，可能必须编辑表中的每一行，以确保每一行与更改一致。例如，如果在表中插入新行，则其下的每一行都需要更改类。

CSS使得用斑马条纹设计桌子样式变得很容易。您不需要添加任何额外的HTML属性或CSS类，只需使用：nth类型（n）CSS选择器。

：nth of type（n）选择器是CSS中的一个结构化伪类，它允许您根据元素与父元素和同级元素的关系来设置元素的样式。可以使用它根据源顺序选择一个或多个图元。换句话说，它可以匹配父元素的特定类型的第n个子元素。

字母n可以是关键字（如奇数或偶数）、数字或公式。

例如，要使用黄色背景色设置其他段落标记的样式，CSS文档将包括：

p:nth-of-type(odd) {background: yellow;}

从html表开始

首先，按照通常用HTML编写的方式创建表。不要向行或列添加任何特殊类。

在样式表中，添加以下CSS：

tr:nth-of-type(odd) {background-color:#ccc;}

这将从第一行开始，每隔一行设置一个灰色背景色的样式。

以相同的方式设置交替列的样式

您可以对表中的列执行相同的样式设置。为此，只需将CSS类中的tr更改为td。例如：

td:nth-of-type(odd) {background-color:#ccc;}

在第n个类型（n）选择器中使用公式

选择器中使用的公式语法为a+b。

a是表示循环或索引大小的数字。
n实际上是字母“n”，代表一个计数器，从0开始。
+是运算符，也可以是“-”
b是一个整数，表示偏移值-例如，选择器应开始应用背景色的行数。如果公式中包含运算符，则需要执行此操作。

例如，如果要为每第三行设置背景色，则公式应为3n+0。CSS可能如下所示：

tr:nth-of-type(3n+0) {background: slategray;}

使用第n个类型选择器的有用工具

如果您对使用类型选择器的伪类nth的公式方面感到有点害怕，请尝试使用：nth Tester站点作为一个有用的工具，它可以帮助您定义语法以实现所需的外观。使用下拉菜单选择类型的第n个（您也可以在这里试验其他伪类，例如第n个child）。

发表于 2021-09-08 11:11
阅读 ( 212 )
分类：数学

你可能感兴趣的文章

javascript程序员jquery基本指南

...您不必调用不同的方法来选择类、id或多个元素。以下是如何选择id： ...

发布于 2021-03-16 15:42
阅读 ( 213 )

基本的html常见问题，你应该书签

...长一段时间了，所以是时候学习基本知识了。它是什么，如何工作，以及如何在HTML中编写一些常用元素。 ...

发布于 2021-03-25 17:43
阅读 ( 240 )

桌子(table)和部门(div)的区别

...如果想要修改布局和网站，也必须简单地理解某些代码是如何工作和行为的&书信电报；表&gt；和&lt；部门&gt；是一个人在设计网站时发现的两种不同类型的标签。这两个标签用于控制网站的布局和外观。现在，当一...

发布于 2021-07-13 08:36
阅读 ( 177 )

如何创建网站第二部分：样式和css

在我们关于如何创建网站的夜校系列的第一部分中，我们学习了一些关于网页的基本知识：HTML。在今天的课程中，我们将开始使用样式和CSS将衣服放到我们的网站上。上面的视频将引导您了解将样式应用于HTML文档中元素的三种...

发布于 2021-07-24 23:08
阅读 ( 286 )

如何使用css设置xml文档的样式(style xml documents with css)

...使用浏览器对其进行解析都很好，但是查看文档时文档将如何显示？XML不是一种表示语言。用XML编写的文档将完全没有格式。如何查看xml 在浏览器中查看XML的关键是级联样式表。样式表允许您定义XML文档的各个方面，从文...

发布于 2021-09-04 21:06
阅读 ( 160 )

使用html表元素属性

...多数标准web浏览器中，摘要不会显示在网页上。下面是如何编写带有摘要的简单表格： summary="This is a sample table that contains filler information. The purpose of this table is to demonstrate a summary."> 第1列第1行第2列第1行 ...

发布于 2021-09-04 21:31
阅读 ( 156 )