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

2019.05.27 清徐企业网站制作

139

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

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

CSS偶数和奇数规则简介

清徐企业网站制作 

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

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

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

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

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

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

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

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

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

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

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

 

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

01

02

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

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

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

 

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

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

01

02

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

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

结果如下:

 

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

01

02

03

04

05

06

<ul>

<li>First element.</li>

<li>Second element.</li>

<li>Third element.</li>

<li>Fourth element.</li>

</ul>

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

01

02

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

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

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

· 第一要素。

· 第二要素。

· 第三要素。

· 第四要素。

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

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

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

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

 

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

 

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

 

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

01

background: #0C71C3;

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

结语

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

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

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

 


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP