清徐企业网站制作：如何使用CSS偶数和奇数规则在WordPress中创建连接表

2019.05.27 清徐企业网站制作

139

清徐企业网站制作的级联样式表(CSS)使您能够创造一些奇妙的效果如果你有相关的专业知识。然而，有这么多元素您可以自定义掌握语言是很困难的。

以CSS偶数和奇数规则为例。它们是鲜为人知的选择器，使您能够针对表、列表中的偶数和奇数元素，以及几乎所有您能想到的其他内容。在本文中，我们将讨论CSS偶数和奇数规则是如何工作的，以及如何使用它们。然后我们将教你如何使用迪维复制它们的效果以获得更好的效果。我们开始工作吧!

CSS偶数和奇数规则简介

清徐企业网站制作

CSS偶数和奇数规则使您能够针对非常特定的元素。

这种类型的CSS选择器的名称说明了它的用途。奇偶规则使您能够在几乎任何情况下针对这两种类型的元素，并将样式应用于它们。

以本节顶部的例子为例-偶数列都有相同的文本颜色，而不均匀的数字则使用不同的颜色。这种效果是可能的，因为我们使用偶数和奇数选择器针对每一种类型的元素，并对它们应用独特的背景色。

现在，您可能很好奇这些特定选择器的应用程序可能是什么，所以让我们使用示例来分解它们：

· 定价表。最佳定价表用颜色来吸引你的眼睛去看他们想让你注册的计划。在这种情况下，您可以使用偶数和奇数选择器来使特定的计划脱颖而出。

· 以提高扩展数据集的可读性。想象一下，你试图弄清楚一张装满数据的长表。使用少量的CSS，您可以应用偶数和赔率规则在行或列之间创建对比，以使事物更具可读性。

· 要突出显示列表中的特定项，请执行以下操作。如果您在一篇文章中包含了一个很长的列表，那么偶数和奇数规则可以方便地突出显示特定条目。您可以用粗体显示特定的项目，更改其字体大小等，而不是使用背景色。

公平地说，CSS偶数和奇怪的规则不是你经常在野外看到的东西。然而，它们很容易应用，所以没有理由不把它们作为你武器库的一部分。让我们谈谈如何将它们付诸实践！

CSS偶数和奇数规则在实践中的作用

表是CSS偶数规则最常见的用例，因为它们是具有明显视觉限制的元素。此外，表格往往由多个元素组成，这使它们成为所讨论的选择器的最佳人选。

下面是一个快速而脏的表的示例，其中应用了最小的样式。它很容易读懂，而且它得到了它所需要的信息，但基本上是这样的：

undefined

如果我们想对它应用偶数和奇数规则，下面是CSS外观的一个示例：

tr:nth-child(even) {background: #CCC}

tr:nth-child(odd) {background: #4D4D4D}

这里,TR引用表中每一行的HTML元素。上面的代码将为所有偶数行设置白色背景，为奇数设置灰色背景，如下所示：

undefined

在本例中，图像角上的绿色单元格被简单地高亮显示。

您还可以针对列而不是行，这在突出显示定价表中的唯一计划时非常方便。下面的代码与前面相同，只包含列而不是行：

col:nth-child(even) {background: #CCC}

col:nth-child(odd) {background: #4D4D4D}

结果如下：

undefined

正如我们前面提到的清徐企业网站制作，您可以使用偶数和奇数规则来锁定任何元素。关键是它应该包含子元素，如行或列-否则，选择器将不知道要针对哪些元素。例如，列表包括李每个条目的HTML元素。下面是一个例子：

<ul>

<li>First element.</li>

<li>Second element.</li>

<li>Third element.</li>

<li>Fourth element.</li>

</ul>

在这种情况下，您希望以偶数和奇数选择器为目标。李元素，因此CSS应该如下所示：

li:nth-child(even) {background: #CCC}

li:nth-child(odd) {background: #4D4D4D}

当然，向列表元素添加背景色并不是一种常见的做法，因此您可能希望使用其他类型的自定义。例如，您可以用粗体显示列表中的奇怪元素，使它们脱颖而出：

· 第一要素。

· 第二要素。

· 第三要素。

· 第四要素。

正如您所看到的，使用偶数和奇数选择器没有任何技巧。它只需针对正确的元素，您就可以在不影响页面其余部分的情况下实现所需的任何更改。

如何使用Divi复制CSS偶数和奇数规则

如果您是Divi用户，则模块系统使您能够添加复杂的元素，例如接触表、定价表、图库和更多内容，只需点击几下即可到达您的任何页面。更重要的是，您可以访问强大的自定义功能来个性化这些元素。

例如，当谈到定价表时，很容易复制CSS偶数规则和奇数规则的效果，而无需使用任何代码，这要归功于Divi。下面是我们用divi Builder:

undefined

现在，假设我们想为每一列应用不同的颜色，为表添加一点对比。使用CSS偶数和奇数规则，我们最终会以相同颜色的整个列为目标，这看起来很糟糕。使用Divi，您可以自定义要针对的特定部分。让我们尝试为第一列和第三列的标题添加蓝色背景。为此，请在您正在编辑的页面上找到定价表模块，然后单击其模块设置按钮：

undefined

现在，找到要瞄准的特定列，然后再次单击它的“设置”按钮：

undefined

如果你跳到先进选项卡，您将找到一个名为定价标题。您可以用简单的CSS行更改该部分的背景色：

01	background: #0C71C3;

现在我们的桌子是什么样子的：

undefined

如果将相同的更改应用于开发人员列，您基本上已经为该特定行实现了偶数和奇数规则：

undefined

表的其余部分看起来很好，但是如果您也想突出每个计划的一些特性呢？这是你通常在定价表中看到的东西，这样游客就可以比较每个计划提供的功能。你，你们能使用针对行的偶数和奇数规则，并错开您的计划的功能，这样只有您想要的才会脱颖而出。使用Divi，你可以用简单的正负符号来复制这种效果。

为此，请转到要修改的列的“设置”部分。对于这个例子，我们将针对基本再来一次。如果您向下滚动其主设置屏幕，您将发现一个文本编辑器，其中包括您前面看到的功能列表：

undefined

如您所见，每个元素前面都有加号。如果用负号替换它们，下面是前端的样子：

undefined

如果你错开正负符号，你可以实现你自己的偶数和奇数设计。此外，您还可以使用文本编辑器进一步定制内容。以下是我们的桌子经过稍微调整一下后的样子：

undefined

自然地，你会想要更挑剔地在一个真正的价格表中突出哪些元素。这样，用户就可以一目了然地知道每个计划提供给他们的是什么，以及与其他计划相比如何。

最后，请记住定价表模块使您能够突出显示特定列，如有特色的表：

undefined

若要选择要突出显示的列，请进入其设置，然后跳到设计标签。你会在最上面找到选择。

结语

CSS容易学习，但很难掌握。有了一些耐心，任何人都可以创造惊人的设计和效果使用语言。即使是那些不那么华丽的元素，比如表格，也可以用正确的方式使用CSS-在这种情况下，使用偶数和奇数规则。

如果您不喜欢坐着调整代码，直到事情看起来很好，迪维主题使您可以使用简单的菜单定制网站的几乎所有方面。另外，您可以在几秒钟内预览您的更改。有了这么多定制设置，就有可能合理地复制CSS偶数和奇数规则的效果。

关于如何在WordPress中使用Divi复制偶数和奇数规则，您有什么疑问吗？让我们在清徐企业网站制作下面的评论部分讨论它们吧！

清徐企业网站制作：如何使用CSS偶数和奇数规则在WordPress中创建连接表

CSS偶数和奇数规则简介

CSS偶数和奇数规则在实践中的作用

如何使用Divi复制CSS偶数和奇数规则

结语

相关推荐