CSS伪类：了解根据索引设置元素样式

今天我们来谈谈CSS的基本知识点:CSS伪类。

CSS 根据文档子树中元素的位置匹配元素的选择器。这些被称为子索引伪，因为它们依赖于元素的位置或顺序，而不是其类型、属性或 ID。有五个：

:first-child和:last-child

正如你可能从名字中猜到的那样，:first-child和:last-child伪类可以选择节点(元素)的第一个子元素或最后一个子元素。和其他伪类一样，:first-child通过:last-child当简单选择器受到限制时，副作用最小。

让我们来看看下面的 HTML 和 CSS：

body {
  font: 16px / 1.5 sans-serif;
}
:first-child {
     color: #e91e63;  
}
:last-child {
color: #4caf50;
}

List of fruits

 

• Apples
• Bananas
• Blueberries
• Oranges
• Strawberries

你可以在下图中看到它的样子。

因为:first-child不合格，所以h2元素和第一li元素都是爆红的。毕竟，h2是 第一个子元素body，并且li是元素的第一个子ul但是为什么剩下的元素呢？li元素是绿色的？嗯，那是因为:last-child也不合格，而且ul是body. 我们基本上输入了它*:first-childand *:last-child。

假如我们有资格:first-child并:last-child通过添加一个简单的选择器，所有这些都更有意义。让我们将选择限制为列出项目。更改:first-child为li:first-child和。:last-child_ li:last-child结果显示在下图中。

:nth-child()和:nth-last-child()

第一个和最后一个孩子有很好的能力选择文档。但是如果我们想选择奇数或偶数元素呢？也许我们想选择文档子树中的第六个元素，或者每三个元素的应用风格。这就是 the:nth-child()和:nth-last-child()伪类起作用的地方。

和一样:not()，也是功能性伪类。他们接受的参数应该是::nth-child():nth-last-child()

最后一项有一定程度的复杂性。我们稍后再谈。

:nth-child()和它有什么区别？:nth-last-child()？起点：:nth-child()向前:nth-last-child()计数，向后计数。CSS 使用计数并以索引 1 而不是 0 开头。

两者:nth-child()和:nth-last-child()它对交替模式非常有用。创建斑马条纹表行颜色是一个完美的用例。以下是 CSS 浅蓝灰色背景为偶数表现提供了如下图所示的结果：

tr:nth-child(even) {
    background: rgba(96, 125, 139, 0.1);
}

切换:nth-child到:nth-last-child由于计数从底部开始，反转此条带，如下所示。

用更复杂的参数尝试一些复杂的例子怎么样？我们将从下面显示的文档开始，包括 20 个项目。

使用:nth-child()and :nth-last-child()，我们可以在特定的位置选择一个孩子。我们可以选择特定位置后的所有子元素，或者通过偏移选择多个元素。让我们改变第六项的背景颜色：

.item:nth-child(6) {
    background: #e91e63;
}

这给了我们以下结果。

但是如果我们想选择每三个元素呢？这是安 B语法用武之地：

.item:nth-child(3n) {
    background: #e91e63;
}

同样，A是步长间隔。它几乎就像n乘数，从 1 开始。所以，如果A = 3.3n将与第相匹配 3、第 6、第 9 等元素。这就是发生的事情，如下所示。

这就是事情变得更有趣的地方。我们可以使用它:nth-child()and:nth-last-child()在某一点之后选择所有元素。除前七个元素外，让我们尝试选择所有元素：

.item:nth-child(n 8) {
    background: #e91e63;
}

这里没有步长值。结果，n 8匹配从第 8 每个元素n从一个元素开始，如下所示。

注：负偏移

负偏移量和范围值也有效。Using:nth-child(-n 8)将我们的选择逆转，并匹配前八个元素。

我们也可以用 offset 和 step 从第五个元素开始选择每三个元素：

.item:nth-child(3n 5) {
    background: #e91e63;
}

:only-child

如果元素是另一个元素的唯一子:only-child元素，伪匹配元素。以下是两个无序列表。第一个有一个项目，第二个包括三个:

• Apple

• Orange
• Banana
• Raspberry

使用li:only-child{color: #9c27b0;}将 select 

• Apple

，因为它是我们第一个列表中唯一的子项。然而，由于有三个兄弟姐妹，第二个列表中的所有项目都不匹配。你可以在下面看到它。

:empty

伪类也可以用来选择没有子元素的元素。:empty现在当我们说的时候:empty，我们的意思是空的。为了让一个元素和:empty伪匹配，它不能包含任何其他东西——甚至是空格。换句话说，

会匹配，但

不会。

有时所见即所得(所见即所得)编辑器p将空元素插入到您的内容中。您可以使用伪类:empty结合使用，避免在这些元素中应用样式；:not()例如p:not(:empty)。

通过索引选择特定类型的元素

假匹配元素在上一节讨论，如果它们占据了文档子树的给定位置。例如，p:nth-last-child(2)选择p父元素倒数第二个元素。

在本节中，我们将讨论类型化的子索引伪。这些伪类也根据索引值匹配元素；然而，匹配仅限于特定类型的元素。例如，选择第五个p元素或偶数索引h2元素。

这样的伪类有五种，它们的名字反映了它们无类型对应物的名字：

这些和子索引伪类的区别是微妙的。where只认为它是一个元素p:nth-child(5)匹配第五个项目，匹配所有元素，然后找到第五个元素。pp:nth-of-type(5)pp

让我们从一个稍微不同的文档开始。它仍然有 20 但其中一些是项目p其中一些元素是div元素。这些p元素有圆角，如下所示。

使用:first-of-type,:last-of-type和:only-type

使用:first-of-type，我们可以选择与选择器匹配的第一个元素。我们给我们的第一个p石灰绿色元素的背景如何：

p:first-of-type {
    background: #cddc39;
}

这种匹配作为其父元素p每个元素的第一个元素，如下所示。

伪类的:last-of-type类似的工作方式，匹配其父级的最后一个元素，如下所示。然而，如果它是唯一的父亲类型:only-of-type如下所示，子元素将匹配一个元素。

让我们看看另一个用途 的示例:first-of-type，但这次使用的是伪元素。还记得::first-letter本章前面的伪元素？嗯，正如你所看到的，它为应用它的每个元素创造了一个初始资本。我们如何进一步将初始资本限制在第一段：

p:first-of-type::first-letter {
    font: bold italic 3em / .5 serif;
    color: #3f51b5;
}

如下图所示，即使前面有标题，我们的段落现在也会有一个首字母大写。

使用:nth-of-type和:nth-last-of-type

和:nth-of-type()也是:nth-last-of-type()功能性伪类。:nth-child()他们接受相同和相同的论点:nth-last-child()。但是像:first-of-typeand一样:last-of-type，索引分析是相同类型的元素。例如，选择第一个p所有其他后续元素p我们可以使用元素odd关键字 with :nth-of-type()：

p:nth-of-type(odd) {
    background: #cddc39;
    color: #121212;
  }

从下图可以看出，这个匹配奇数p元素，而不是奇数子元素。

类似地， using:nth-last-of-type(even)选择偶数p元素，但计数从p文档中的最后一个元素开始 – 本例第一 18 项(如下所示)。

如果它看起来仍然模糊，请使用它 Paul Maloney 的Nth-Test 工具【http://nth-test.com/，或查看Nth Master 上的示例【http://nthmaster.com/]。这两个项目都是了解更多这些伪类的好方法。