css3伪元素::_CSS伪类：基于元素索引的样式

css3伪元素::

The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下是Tiffany B. Brown所著《 CSS Master》一书的摘录。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

CSS also provides selectors for matching elements based on their position in the document subtree. These are known as child–indexed pseudo-classes, because they rely on the position or order of the element rather than its type, attributes, or ID. There are five:

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

• :first-child

  :first-child

• :last-child

  :last-child

• :only-child

  :only-child

• :nth-child()

  :nth-child()

• :nth-last-child()

  :nth-last-child()

:first-child和:last-child (:first-child and :last-child)

As you’ve probably guessed from the names, the :first-child and :last-child pseudo-classes make it possible to select elements that are the first child or last child of a node (element). As with other pseudo-classes, :first-child and :last-child have the fewest side effects when qualified by a simple selector.

正如您可能从名称中猜到的那样， :first-child和:last-child伪类使选择作为节点(元素)的第一个孩子或最后一个孩子的元素成为可能。 与其他伪类一样， :first-child和:last-child在通过简单选择器限定时副作用最少。

Let’s take a look at the HTML and CSS below:

让我们看一下下面HTML和CSS：

    


   
List of fruits
	 

		
Apples
		
Bananas
		
Blueberries
		
Oranges
		
Strawberries
	

You can see what this looks like in the figure below.

您可以在下图中看到它的外观。

Because :first-child is unqualified, both the h2 element and first li element are hot pink. After all, h2 is the first child of body, and li is the first child of the ul element. But why are the remaining li elements green? Well, that’s because :last-child is also unqualified, and ul is the last child of body. We’ve essentially typed *:first-child and *:last-child.

因为:first-child不合格，所以h2元素和first li元素均为粉红色。 毕竟， h2是body的第一个孩子， li是ul元素的第一个孩子。 但是为什么其余的li元素是绿色的呢？ 好吧，这是因为:last-child也没有资格，而ul是body的最后一个孩子。 我们基本上已经输入了*:first-child和*:last-child 。

If we qualify :first-child and :last-child by adding a simple selector, it all makes more sense. Let’s limit our selection to list items. Change :first-child to li:first-child and :last-child to li:last-child. the image below shows the result.

如果我们通过添加一个简单的选择器来限定:first-child和:last-child ，那么这一切就更有意义了。 让我们将选择范围限制为列出项目。 将:first-child更改为li:first-child ，将:last-child更改为li:last-child 。 下图显示了结果。

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

The ability to select the first and last children of a document is fine. But what if we want to select odd or even elements instead? Perhaps we’d like to pick the sixth element in a document subtree, or apply styles to every third element. This is where the :nth-child() and the :nth-last-child() pseudo-classes come into play.

可以选择文档的第一个和最后一个子级。 但是，如果我们想选择奇数或偶数元素怎么办？ 也许我们想在文档子树中选择第六个元素，或者将样式应用于每个第三个元素。 这就是伪类:nth-child()和:nth-last-child()起作用的地方。

Like :not(), :nth-child() and :nth-last-child() are also functional pseudo-classes. They accept a single argument, which should be either:

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

• the odd keyword

  odd关键字

• the even keyword

  even关键字

• an integer such as 2 or 8, or

  整数，例如2或8，或者

• an argument in the form An+B^[5] where A is a step interval, B is the offset, and n is a variable representing a positive integer.

  An + B形式的参数 ^[5]其中， A是步长间隔， B是偏移量， n是代表正整数的变量。

That last item has a degree of complexity. We’ll come back to it in a moment.

最后一项具有一定程度的复杂性。 我们待会儿再讲。

What’s the difference between :nth-child() and :nth-last-child()? The starting point: :nth-child() counts forwards and :nth-last-child() counts backwards. CSS indexes use counting numbers and start with one rather than zero.

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

Both :nth-child() and :nth-last-child() are useful for alternating patterns. Creating zebra-striped table row colors is the perfect use case. The CSS that follows gives even-numbered table rows a light bluish-gray background, the result of which can be seen in the figure below:

:nth-child()和:nth-last-child()都可用于交替模式。 创建斑马纹的表行颜色是理想的用例。 后面CSS为偶数编号的表行提供浅蓝色灰色背景，其结果可以在下图中看到：

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

Switching :nth-child to :nth-last-child inverts this banding, since the counting begins from the bottom, shown below.

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

How about trying some complex examples using more complex arguments? We’ll start with the document shown below, which contains 20 items.

如何使用更复杂的参数尝试一些复杂的示例？ 我们将从下面显示的文档开始，其中包含20个项目。

With :nth-child() and :nth-last-child(), we can select a single child at a particular position. We can select all of the children after a particular position, or we can select elements by multiples, with an offset. Let’s change the background color of the sixth item:

使用:nth-child()和:nth-last-child() ，我们可以在特定位置选择一个孩子。 我们可以选择特定位置之后的所有子项，也可以选择带偏移的倍数元素。 让我们更改第六项的背景颜色：

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

This gives us the result below.

这给了我们下面的结果。

But what if we want to select every third element? Here’s where the An+B syntax comes in:

但是，如果我们要选择每三个元素怎么办？ 这是An + B语法的来源：

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

Again, A is a step interval. It’s almost like a multiplier for n, which starts at 1. So if A = 3, then 3n would match the 3rd, 6th, 9th, and so on elements. That’s exactly what happens, as you can see in below.

同样， A是一个步长间隔。 它几乎就像n的乘数，从1开始。因此，如果A = 3，则3n将匹配第3、6、9等元素。 正如下面所看到的，这就是发生的情况。

Here’s where matters become a little more interesting. We can use :nth-child() and :nth-last-child() to select all elements after a certain point. Let’s try selecting all but the first seven elements:

在这里事情变得更加有趣。 我们可以使用:nth-child()和:nth-last-child()选择特定点之后的所有元素。 让我们尝试选择除前七个元素之外的所有元素：

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

Here, there is no step value. As a result, n+8 matches every element n beginning with the eighth element, as shown below.

在此，没有步长值。 结果， n+8匹配从第八个元素开始的每个元素n ，如下所示。

注意：负偏移 (Note: Negative Offsets)

Negative offset and range values are also valid. Using :nth-child(-n+8) would invert our selection, and match the first eight elements.

负偏移和范围值也有效。 使用:nth-child(-n+8)会反转我们的选择，并匹配前八个元素。

We can also use the offset and step values to select every third element, starting with the fifth:

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

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

You can see the results of this selector below.

您可以在下面查看此选择器的结果。

：唯一的孩子 (:only-child)

The :only-child pseudo-class matches elements if they are the only child of another element. Below are two unordered lists. The first has one item while the second contains three:

:only-child伪类与元素匹配(如果它们是另一个元素的唯一子元素)。 以下是两个无序列表。 第一个包含一个项目，第二个包含三个项目：

 
Apple



 
Orange
 
Banana
 
Raspberry

Using li:only-child{color: #9c27b0;} will select

Apple

, since it’s the only child of our first list. None of the items in the second list match, however, because there are three siblings. You can see what this looks like below.

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

Apple

，因为它是我们第一个列表中的唯一子项。 但是，第二个列表中的所有项目都不匹配，因为有三个同级。 您可以在下面看到它的外观。

：空 (:empty)

It’s also possible to select elements that have no children using the :empty pseudo-class. Now when we say :empty, we mean empty. In order for an element to match the :empty pseudo-class, it can’t contain anything else—not even whitespace. In other words,

will match, but

will not.

也可以使用:empty伪类选择没有子元素的元素。 现在，当我们说:empty ，我们的意思是空的 。 为了使元素匹配:empty伪类，它不能包含任何其他内容，甚至不能包含空格。 换句话说，

将匹配，但

将不匹配。

Sometimes WYSIWYG (What You See Is What You Get) editors insert empty p elements to your content. You could use :empty in combination with the :not() pseudo-class to avoid applying styles to these elements; for example p:not(:empty).

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

通过索引选择特定类型的元素 (Selecting Elements of a Particular Type by their Index)

The pseudo-classes discussed in the previous section match elements if they occupy the given position in a document subtree. For instance, p:nth-last-child(2) selects every p element that is the next-to-last element of its parent.

如果伪类在文档子树中占据给定位置，则上一节中讨论的伪类将与元素匹配。 例如， p:nth-last-child(2)选择每个p元素，它是其父元素的倒数第二个元素。

In this section, we’ll discuss typed child-indexed pseudo-classes. These pseudo-classes also match elements based on the value of their indexes; however, matches are limited to elements of a particular type. Selecting the fifth p element, or even-indexed h2 elements, for example.

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

There are five such pseudo-classes with names that mirror those of their untyped counterparts:

有五个此类伪类，其名称与它们的未类型化对应类的名称相同：

• :first-of-type

  :first-of-type

• :last-of-type

  :last-of-type

• :only-of-type

  :only-of-type

• :nth-of-type()

  :nth-of-type()

• :nth-last-of-type()

  :nth-last-of-type()

The difference between these and child-indexed pseudo-classes is a subtle one. Where p:nth-child(5) matches the fifth item only if it is a p element, p:nth-of-type(5) matches all p elements, then finds the fifth p element among those.

这些和子索引伪类之间的区别是微妙的。 仅当p:nth-child(5)是p元素时才与第五项匹配，而p:nth-of-type(5)与所有p元素匹配，然后在其中找到第五个p元素。

Let’s start with a slightly different document. It still has 20 items, but some of them are p elements and some of them are div elements. The p elements have rounded corners, as can be seen below.

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

使用:first-of-type ， :last-of-type和:only-type (Using :first-of-type, :last-of-type, and :only-type)

With :first-of-type, we can select the first element that matches a selector. How about we give our first p element a lime green background:

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

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

This will match every p element that’s the first p element of its parent, shown below.

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

The :last-of-type pseudo-class works similarly, matching the last such element of its parent as presented below. However, :only-of-type will match an element if it’s the only child element of that type of its parent, illustrated underneath.

:last-of-type伪类的工作原理类似，匹配其父级的最后一个此类元素，如下所示。 但是， :only-of-type将与元素匹配，如果它是其父类型的唯一子元素，则在下面说明。

Let’s look at another example of using :first-of-type, but this time with a pseudo-element. Remember the ::first-letter pseudo-element from earlier in this chapter? Well, as you saw, it created an initial capital for every element to which it was applied. How about we go one step further, and limit this initial capital to the first paragraph instead:

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

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

As the image below shows, now our paragraph will have an initial capital, even if it’s preceded by a headline.

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

使用:nth-of-type和:nth-last-of-type (Using :nth-of-type and :nth-last-of-type)

The :nth-of-type() and :nth-last-of-type() are also functional pseudo-classes. They accept the same arguments as :nth-child() and :nth-last-child(). But like :first-of-type and :last-of-type, the indexes resolve to elements of the same type. For example, to select the first p element and every other subsequent p element, we can use the odd keyword with :nth-of-type():

:nth-of-type()和:nth-last-of-type()也是功能性伪类。 它们接受与:nth-child()和:nth-last-child()相同的参数。 但是像:first-of-type和:last-of-type ，索引解析为相同类型的元素。 例如，要选择第一个p元素和随后的所有其他p元素，我们可以使用带有:nth-of-type()的odd关键字：

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

As you can see from teh image below, this only matches odd-numbered p elements, rather than odd-numbered children.

从下面的图像中可以看到，这仅匹配奇数个p元素，而不匹配奇数个子元素。

Similarly, using :nth-last-of-type(even) selects even-numbered p elements, but the count begins from the last p element in the document—in this case, item 18 (shown below).

同样，使用:nth-last-of-type(even)选择偶数个p元素，但计数从文档中的最后一个p元素开始-在本例中为第18项(如下所示)。

If this still seems fuzzy, play with Paul Maloney’s Nth-Test tool, or view the examples at Nth Master. Both projects are excellent ways to learn more about these pseudo-classes.

如果这仍然很模糊，请使用Paul Maloney的Nth-Test工具，或在Nth Master上查看示例。 这两个项目都是了解这些伪类的绝妙方法。

---

---

^[5] This An+B syntax is described in CSS Syntax Module Level 3.

^[5]在CSS语法模块级别3中介绍了此An + B语法。

翻译自: https://www.sitepoint.com/css-pseudo-classes-styling-elements-based-on-their-index/

css3伪元素::