css伪元素和伪类
by Nash Vail
由Nash Vail
CSS伪类如何工作，通过代码和大量图表进行解释 (How CSS pseudo-classes work, explained with code and lots of diagrams)
Let’s be honest — there are times when CSS can really hurt your brain. It’s hard enough to center an element inside its parents.
坦白讲，有时候CSS确实会伤害您的大脑。 很难将元素置于其父元素内部。
Today, we’re going to make sense of an even more challenging aspect of CSS: pseudo-classes.
今天，我们将了解CSS更具挑战性的方面：伪类。
The pseudo-classes I’ll cover here come in two flavors.
我将在这里介绍的伪类有两种形式。
- *-of-type selectors *类型选择器
- *-child selectors *-子选择器
You may be thinking, “But I’m here to learn pseudo-classes. Why are we talking about selectors?” Well, these are basically the same thing, and I will use these terms interchangeably.
您可能会想，“但是我是来这里学习伪类的。 我们为什么要谈论选择器？” 好吧，这些基本上是同一回事，我将互换使用这些术语。
Pseudo-classes are sometimes hard to grasp, mainly because they’re presented in an abstract way. So I’ll take a different approach here and help you understand these by drawing a DOM tree.
伪类有时很难理解，主要是因为它们以抽象的方式呈现。 因此，我将在此处采用其他方法，并通过绘制DOM树来帮助您理解这些内容。
标记与树 (The Markup and The Tree)
First, take a look at this block of HTML. I’ll use this code in all my examples.
首先，看一下这段HTML。 我将在所有示例中使用此代码。
<body> <div class=”main”> <a href=”#”>Inner Link 1</a> <a href=”#”>Inner Link 2</a> <ul> <a href=”#”>Inner Inner Link 1</a> <li> <a href=”#”>List Item 1</a> </li> <li> <a href=”#”>List Item 2</a> </li> </ul> <a href=”#”>Inner Link 3</a> </div> <a href=”#”>Outer Link 1</a> <a href=”#”>Outer Link 2</a></body>Now I’m going to convert this code into something more visual and more intuitive: a tree.
现在，我将把这些代码转换为更直观，更直观的东西：一棵树。
The following body element has 3 children, .main and two anchor elements.
以下body元素具有3 个子元素， .main和两个锚元素。
<body> <div class=”main”> ... </div> <a href=”#”>Outer Link 1</a> <a href=”#”>Outer Link 2</a></body>Here’s what the relation between body and its three children looks like when you is represent it as a tree:
当您将其表示为一棵树时，这是身体及其三个孩子之间的关系的样子：
One thing to keep in mind is that the order in which children are placed in the tree is important. Children located top to bottom in code are placed left to right in the tree.
要记住的一件事是，孩子在树上的放置顺序很重要。 在代码中从上到下放置的子代在树中从左到右放置。
Next, let’s look at the .main div:
接下来，让我们看一下.main div：
<div class=”main”> <a href=”#”>Inner Link 1</a> <a href=”#”>Inner Link 2</a> <ul> ... </ul> <a href=”#”>Inner Link 3</a></div>.main has 4 children. The first two are anchor elements then an ul and then again an anchor elements.
.main有4个孩子。 前两个是锚元素，然后是ul ，再是锚元素。
Similarly, we step down each level of nesting and draw the complete tree out of the HTML code.
同样，我们逐步降低嵌套的每个级别，并从HTML代码中绘制出完整的树。
In order for this article to bear any fruit for you, it’s important that you understand this tree.
为了使本文能为您带来成果，理解这棵树很重要。
“Ha ha nice pun there!” “Thanks!” Increment the pun counter to 1, and let’s move to our very first pseudo-class.
“哈哈，那里的双关语！” “谢谢！” 将Pun计数器增加到1，让我们进入第一个伪类。
伪类1：仅类型 (Pseudo-class 1 :only-of-type)
All pseudo-classes follow the same format:
所有伪类都遵循相同的格式：
what-you-want-to-select:filter { /* styles */ }what-you-want-to-select can be used to select anything that exists as a collection in the DOM. Here, allow me to go ahead and show you an example:
您想要选择的内容可用于选择DOM中作为集合存在的任何内容。 在这里，请允许我继续向您展示一个示例：
a:only-of-type { border: 2px solid black;}In the code snippet shown above, what-you-want-to-select are anchor elements (the a tag), and the filter is only-of-type. We’ll see in a moment what this selector does.
在上面的代码片段所示， 什么，你要对选择的锚要素( 标签 )， 滤波器 仅-的类型。 稍后我们将看到此选择器的作用。
First, I’ve setup a codepen for if you’re too lazy to create a tester project. You’re welcome, friend!
首先，如果您懒得创建测试器项目，那么我会设置一个Codepen 。 不客气，朋友！
You can follow along, see the changes, get confused, then come back to this article for the explanation. You do your part, I’ll do mine.
您可以继续进行下去，查看更改，感到困惑，然后返回本文进行解释。 尽你的本分，我会做的。
Here’s me doing my part, explaining the code shown above. We’ll start by selecting everything that there is, and then eventually filter down.
这是我的职责，解释了上面显示的代码。 我们将从选择所有内容开始，然后最终进行过滤。
Notice how the selection has been done? Each section in the tree (numbered 1 to 5) has elements with a common parent. The parent of Section 1 is body, the parent of Section 2 is .main, and so on. Once again, notice that each section corresponds to a level deeper in code nesting.
请注意选择是如何完成的？ 树中的每个部分(编号1到5)都具有带有共同父代的元素。 第1节的父项是body ，第2节的父项是。 主要，依此类推。 再次注意，每个部分对应于代码嵌套中的更深层次 。
Next, since anchor elements are what-you-want-to-select, we’ll do just that:
接下来，由于锚元素是您想要选择的东西 ，我们将这样做：
We’ve selected all the anchor element in each of the sections and numbered them consecutively left to right. And I mentioned, the order — left to right — is important.
我们已在每个部分中选择了所有锚元素，并从左至右对其进行了连续编号。 我提到过，从左到右的顺序很重要。
This is where what-you-want-to-select part ends and the filtering begins.
这是您想要选择的部分 结束，开始过滤。
only-of type traverses each section and selects only those anchor elements that are the only anchor element in their respective section. Notice how sections 3, 4, and 5 are the only sections with anchor elements? As figure 6 shows, these are the ones that get selected and declared when a style gets applied.
仅类型t遍历每个部分，并仅选择作为其各自部分中唯一锚元素的那些锚元素。 请注意，第3、4和5部分是仅有锚元素的部分吗？ 如图6所示，这些是在应用样式时选择并声明的样式。
伪类2：第一类 (Pseudo-class 2 :first-of-type)
Let’s fast forward to the part where we end selecting all the “what-you-want-to-select”s (anchor elements in our case).
让我们快速进行到最后选择所有“ 您想要选择的内容 ”(在本例中为锚元素)的部分。
The filter first-of-type translates to selecting in each of the sections only the first occurrence of the anchor element.
过滤器的第一类型转换为在每个部分中仅选择锚元素的第一次出现。
Here’s what the code that accomplishes this looks like:
这是实现此目的的代码如下所示：
a:first-of-type { border: 2px solid black;}In case you forgot the hard work I did for you setting up the CodePen, here’s the link again to check out what the code renders in a browser.
万一您忘记了我为设置CodePen所做的辛苦工作，这里再次提供了链接 ，以查看代码在浏览器中呈现的内容。
伪类3：最后一个类型 (Pseudo-class 3 :last-of-type)
If you can’t tell by the name, last-of-type is the exact opposite of first-of-type. Which therefore means in each section of the tree, instead of selecting the first occurrence, select the last ones.
如果您不能通过名字来分辨，则last-of-type与first-of-type完全相反。 因此，这意味着在树的每个部分中，而不是选择第一个匹配项，而是选择最后一个匹配项。
“What about the sections with just one anchor element?”, not very glad you asked that question. It’s quite simple to see if a section has just one anchor element, it obviously passes the only-of-type filter, but not only that. Since there are no anchor elements preceding or following that particular tag it passes both first-of-type and last-of-type filters as well (e.g a tags Section 4 and 5).
“只有一个锚元素的部分呢？”，您问这个问题并不很高兴。 很容易看出一个节是否只有一个锚元素，它显然通过了唯一类型的过滤器，但不仅如此。 由于在该特定标签之前或之后没有锚元素，因此它也同时通过了首个和最后一个过滤器(例如，第4和5节的标签)。
伪类4：nth-of-type(数字/一个+ b /偶数/奇数) (Pseudo-class 4 :nth-of-type(number/an + b/even/odd))
And now we finally bite into the juicy part of the article, there’s simple CSS with some fifth grade Math toppings, hope you enjoy savouring it.
现在我们终于可以进入文章的多汁部分了，这里有简单CSS和一些五年级的Math topping，希望您喜欢它。
Let’s declare the following style to begin with.
让我们开始声明以下样式。
a:nth-of-type(1) { border: 2px solid black;}It looks a little cryptic but is quite simple really. To read the selector simply take the number from the parentheses and replace nth in the selector name with that number’s ordinal form. That’s another fancy English word for you, to be honest though…
它看起来有些神秘，但实际上非常简单。 要读取选择器，只需从括号中取出数字，然后将选择器名称中的nth替换为该数字的序数形式。 老实说，这对您来说是另一个花哨的英语单词……
Alright coming back, a:nth-of-type(1) can be therefore read as a:first-of-type and no surprise it works exactly like a:first-of-type and results in the elements getting selected as shown below; just the anchor elements which are first of their types in their respective section.
好吧回来了，因此a：nth-of-type(1)可以读为a：first-of-type ，毫不奇怪，它的工作原理与a：first-of-type完全一样，并导致元素被选择，如下所示; 只是锚元素，它们是各自部分中的第一类。
Well that is fine and dandy, but let’s try something different here.
好吧，花花公子，但让我们在这里尝试一些不同的事情。
a:nth-of-type(0) { border: 2px solid black;}If you guessed it right, which I am sure you didn’t, no anchor elements get selected in this case. As the numbering of types (and children as we’ll see) in each section starts from 1 and not 0, there is no “0” anchor elements in any of the sections and therefore a:zeroth-of-type selects nothing. And so will be the case for a:nth-of-type(5) or a:nth-of-type(6/7/8) because there are no a:fifth-of-type or a:sixth/seventh/eighth-of-type in any of the sections.
如果您猜对了(我确信您没有)，那么在这种情况下不会选择锚元素。 由于每个部分中类型的编号(以及我们将要看到的子级)从1而不是0开始，因此任何部分中都不存在“ 0”锚元素，因此a：zeroth-of-type不选择任何内容。 因为没有a：fifth-of-type或a：sixth / seventh / ，所以a：nth-of-type(5)或a：nth-of-type(6/7/8)也会如此。任何部分中的第八种 。
But if we went ahead and used…
但是如果我们继续使用...
a:nth-of-type(2) { border: 2px solid black;}… quite clearly sections 1 and 2 have a second-of-type anchor elements and hence those are the ones that get selected.
…显然，第1和第2部分具有第二种锚元素，因此这些是被选择的锚元素。
Similarly, just to reinforce the point here, if we went ahead and declared the following style,
同样，为了强调这一点，如果我们继续声明以下样式，
a:nth-of-type(3) { border: 2px solid black;}it will select the third anchor elements in the second section as section 2is the only section with a :third-of-type anchor element.
它将选择第二部分中的第三锚元素，因为第2部分是唯一带有： 第三类锚元素的部分。
Quite simple isn’t it? But numbers aren’t the only thing that you can pass into :nth-of-type(…), this bloke is more powerful that that, you can also pass in formulas of form (a*n) + b (or for brevity an + b). Where a and b are constants and n is a value >= 0. How did you like the Math topping sir? don’t worry it’ll all make sense in a second.
是不是很简单？ 但是，数字不是唯一可以传递给：nth-of-type(...)的东西，这种方法更强大，它还可以传递(a * n)+ b形式的公式(或者为了简洁起见一个+ b ) 。 其中a和b是常量， n是> = 0的值。您对Math topping先生的感觉如何？ 不用担心，这一切都将在一秒钟之内。
Consider the following style
考虑以下样式
a:nth-of-type(n) { border: 2px solid black; }The formula that’s passed in the selector above is (1 * n) + 0 [= n] , a is 1, b is 0 and n is well, n. What happens next is, starting from 0 the numerical value of n is incrementally plugged into the formula and selection is made. Therefore a:nth-of-type(n) basically translates to
在上面的选择器中传递的公式是(1 * n)+ 0 [= n] ， a是1，b 是0， n是n。 接下来发生的是，从0开始，将n的数值逐步插入公式中并进行选择。 因此a：nth-of-type(n)基本上转换为
a:nth-of-type(0) { border: 2px solid black; } // n = 0a:nth-of-type(1) { border: 2px solid black; } // n = 1a:nth-of-type(2) { border: 2px solid black; } // n = 2a:nth-of-type(3) { border: 2px solid black; } // n = 3a:nth-of-type(4) { border: 2px solid black; } // n = 4...Hence this results in all the anchor elements getting selected.
因此，这导致所有锚元素被选中。
Let’s consider one more example
让我们再考虑一个例子
a:nth-of-type(2n + 1) { border: 2px solid black; }Starting from 0 and incrementally plugging values of n in the formula generates the following selectors.
从0开始，并在公式中逐渐插入n的值会生成以下选择器。
// n = 0 implies (2 * 0) + 1 = 1a:nth-of-type(1) { border: 2px solid black; }// n = 1 implies (2 * 1) + 1 = 3a:nth-of-type(3) { border: 2px solid black; }// n = 2 implies (2 * 2) + 1 = 5 - No selections since no fifth-of-type present in any of the sectionsa:nth-of-type(5) { border: 2px solid black; }...Other than numbers and formulas that generate numbers, you can pass in either even or odd strings. even selects all the even occurrences of an element of particular type in a section i.e :second-of-type :fourth-of-type :sixth-of-type e.t.c and on the other hand obviously :nth-of-type(odd) selects all the odd occurrences i.e :first-of-type, :third-of-type, :fifth-of-type e.t.c
除了数字和生成数字的公式外，您还可以传入偶数或奇数字符串。 甚至选择一个节中某个特定类型元素的所有偶数出现，例如：：second-of-type ：fourth-of-type ：sixth-type等，另一方面，显然是：nth-of-type(odd)选择所有奇数出现，即：类型的第一，类型的第三，类型的第五等
伪类5：类型的倒数第(number / an + b / even / odd) (Pseudo-class 5 :nth-last-of-type(number/an + b/even/odd))
This selector functions exactly like the previous one, but with one little difference. See for yourself…
该选择器的功能与上一个选择器完全相同，但有一点区别。 你自己看…
a:nth-last-of-type(1) { border: 2px solid black; }Notice how in each level numbering of anchor types is done from right to left instead of normal left to right. That is the only difference. last-of-type accepts numbers and formulas and even/odd just like nth-of-type except when selection is made the last type is treated as first, second last as second, third last as third and so on…
请注意，如何在每个级别中对锚类型进行从右到左而不是从正常的左到右编号。 那是唯一的区别。 last-of-type接受数字和公式，偶数/奇数与nth-of-type相同，除了进行选择时，将last type视为第一个，倒数第二个作为第二个，倒数第三个作为第三个，依此类推…
With that we come to an end of *-of-type selectors. Hope it was a fun ride for you, we started with only-of-type then moved to first-of-type, last-of-type and took a huge dip into nth-of-type(…) and nth-last-of-type(..). If in case somewhere in the middle you lost your grip and fell off I encourage you play around with this pen and re read the explanation.
这样，我们就结束了* -of-type选择器。 希望这对您来说是一个有趣的旅程，我们从只有类型开始，然后转移到第一类型 ， 最后一个类型 ，并大量涉足nth-of(...)和nth-last- of-type(..)。 如果万一在中间某处您失去了控制力而摔倒了，我建议您使用这支笔在旁边玩耍，并重新阅读说明。
Alright, time to hop on to the next one in this less visited corner of the CSS theme park. Another category of pseudo selectors/classes we’re going to delve into are *-child classes. With a clear understanding of how *-of-type selectors work grasping the concept behind *-child selectors should be a cinch for you. “Cinch? What’s that? Is it a unit of measurement?” No ya dumbass, it means an extremely easy task. Anyways, let’s start with our very first *-child selector, :only-child.
好了，是时候在CSS主题公园这个人迹罕至的角落跳到下一个了。 我们将要研究的另一类伪选择器/类是* -child类。 随着* -of型选择的工作方式抓背后* 柴尔德选择的概念有清晰的认识应该是你不在话下。 “肚带？ 那是什么？ 它是度量单位吗？” 没有笨蛋，这意味着一个极其简单的任务。 无论如何，让我们从第一个* -child选择器开始 ： only-child 。
子伪类1：独生子 (Child pseudo-class 1 :only-child)
Consider the following style.
考虑以下样式。
a:only-child { border: 2px solid black;}Now that’s the very definition of self explanatory and straightforward. The selector says to select all the anchor elements, given that the anchor element should be the only child of its parent, or, to put in other words select all the anchor elements whose parent has just one child and that one child is an anchor element.
现在，这就是自我解释和直截了当的定义。 选择器说选择所有锚元素，因为该锚元素应该是其父元素的唯一子元素，或者换句话说，选择所有父元素只有一个孩子而一个孩子是锚元素的所有锚元素。 。
I had a friend who was never his mother’s favorite, and he was an only child. Just wanted to plug that in there, anyways, notice that in contrast with *-of-type selectors we are no longer numbering types, but children, starting of course from 1 (and not 0). When compared with only-of-type, the anchor element in section 3 is not selected as its parent (ul) has 3 children therefore even though it (the anchor element in level 3) is an only child of type ‘a’ of its parent, its not the only child, there are 2 lis as well.
我有一个从来没有他母亲喜欢的朋友，他是独生子。 无论如何，只是想将其插入那里，请注意，与* -of-type选择器相反，我们不再为类型编号，而是从1(而不是0)开始的子代编号。 与仅类型比较时， 未选择第3节中的anchor元素，因为其父级( ul )有3 个子级，因此即使它(第3级中的anchor元素)是其父级“ a”类型的唯一子级，也不是唯一的子级，有2 li s。
子伪类2：第一个孩子 (Child pseudo-class 2 :first-child)
Consider the following style declaration.
考虑以下样式声明。
a:first-child { border: 2px solid black;}It simply says, select all the anchor element, but with one condition in mind, the anchor element should be the first child of its parent. That’s it, no further explanation needed.
它只是说，选择所有锚元素，但是考虑到一个条件，锚元素应该是其父元素的第一个孩子。 就是这样，不需要进一步的解释。
For if you are a little confused as of why the a in section 1 wasn’t selected it’s because the first child in section 1 (whose parent is body) is .main, the first a in section 1 is the second child and couldn’t pass the first-child filter, that is the exact reason why the poor bloke ended up not being selected and was given a big hashtag fuck off. Let’s continue to the next one.
因为如果你是困惑，为什么不选择在第1节的一个 ，那是因为在第1(其母公司为体 )。主要的第一个孩子，在第1节第一个是老二和couldn”一点点t通过了第一个孩子过滤器，这就是为什么那个可怜的家伙最终没有被选中并被赋予了一个巨大的标签他妈的的确切原因。 让我们继续下一个。
子伪类3：最后一个孩子 (Child pseudo-class 3 :last-child)
This is the part where selectors should start to get self explanatory and you should start thinking I am dumb trying to explain them to you. But my name is not blurryface and I don’t care what you think. “Nice twenty one pilots reference there” yeah I know, thanks. Now, look at the following style declaration.
这是选择器应该开始自我解释的部分，您应该开始认为我很愚蠢，试图向您解释它们。 但是我的名字并不模糊，我不在乎你的想法 。 “不错，有21位飞行员在那儿介绍”，是的，我知道，谢谢。 现在，看下面的样式声明。
a:last-child { border: 2px solid black;}what-you-want-to-select ? “Anchor elements.” And the filter you want to use? last-child. That quite simply translates to select those anchor elements which are the last child of their parent. Or, in other words select anchor elements whose parent finally decided it wasn’t fun anymore and stopped after that bloke was born. Below is what the tree looks like with :last-child selections.
您想选择什么？ “锚元素。” 您要使用的过滤器 ？ 最后一个孩子。 相当简单地转换为选择那些是其父级的最后一个子级的锚元素。 或者，换句话说，选择锚元素，其父级最终确定它不再有趣了，并在该家伙出生后就停止了。 下面是使用：last-child选择的树的外观。
子伪类4：nth-child(数字/ an + b /偶数/奇数) (Child pseudo-class 4 :nth-child(number/an+b/even/odd))
I hope you were able to digest the Math topping you got served last time, because it’s about to happen again only this time on a slightly different crust.
我希望您能够消化上次获得的数学进阶知识，因为只有在略有不同的外壳上，这一次才会再次发生。
Now, I would like you to take all your attention and laser point it to the following example.
现在，我希望您将所有精力都放在下面的示例上。
a:nth-child(1) { border: 2px solid black; }It’s all the same as :nth-of-type, I would have linked to that section of the article here but Medium policies don’t allow that, if you want a refresher, you will have to scroll up to that section. Leaving Medium policies aside which might change in future, what hasn’t changed is the process of decrypting nth-selectors .
它与：nth-of-type都是一样的，我应该在这里链接到该部分，但中型策略不允许这样做，如果您想复习一下，则必须向上滚动到该部分。 撇开可能在将来发生变化的中型策略，不变的是解密nth-selector的过程。
Just like with :nth-of-type, in the selector name take the number in parentheses and replace “nth” with that number’s ordinal form. Therefore the selector shown in example is equivalent to a:first-child and works exactly the same; i.e selects all the anchor elements, given that they are the first child of their parent.
就像：nth-of-type一样，在选择器名称中，将括号中的数字替换为该数字的序号形式的“ nth” 。 因此，示例中显示的选择器等效于a：first-child ，其工作原理完全相同； 即选择所有锚元素，因为它们是其父级的第一个孩子。
That should nail the similarity between the two nth-selectors (nth-of-type and nth-child), but we will anyways go ahead and take a look at another example.
这应该确定两个nth选择器(nth-type和nth-child)之间的相似性，但是无论如何，我们将继续研究另一个示例。
a:nth-child(2n - 1) { border: 2px solid black; }We begin by incrementally plugging in values of n starting from 0 into the formula, which makes us realize that the selector shown above is basically equivalent to the ones shown below.
我们首先将从0开始的n值逐步插入公式中，这使我们意识到上面显示的选择器基本上等同于下面显示的选择器。
// n = 0 implies (2 * 0) - 1 = 0 - 1 = -1a:nth-child(-1) { border: 2px solid black; } | No selections// n = 1 implies (2 * 1) - 1 = 2 - 1 = 1a:nth-child(1) { border: 2px solid black; }// n = 2 implies (2 * 2) - 1 = 4 - 1 = 3a:nth-child(3) { border: 2px solid black; }// n = 3 implies (2 * 3) - 1 = 6 - 1 = 5a:nth-child(5) { border: 2px solid black; } | No selections further...As it is, if the selector gets numbers out of bounds (like -1, 5, 6… in the case above) fed into it, it just ignores them. Following is how the tree looks with a:nth-child(2n-1) applied.
照原样，如果选择器输入的数字超出范围(如上例中的-1、5、6…)，它将忽略它们。 以下是应用a：nth-child(2n-1)的树的外观。
Folks at CSS Tricks have a very informative article called Useful :nth-child Recipes you should check it out and put your knowledge of :nth-child to test. I challenge you m8.
CSS Tricks上的人们有一篇非常有用的文章，名为“ 有用的：nth-child食谱”，您应该检查一下并把有关的知识： nth-child进行测试。 我向您挑战M8。
With that we will move to the last selector of this article which punningly is :nth-last-child. Holy shit! why is “punningly” a word even?
有了这个，我们将转到本文的最后一个选择器，可笑的是：nth-last-child。 天哪！ 为什么甚至“刻薄地”一个词？
子伪类5：nth-last-child(number / an + b / even / odd) (Child pseudo-class 5 :nth-last-child(number/an + b/even/odd))
This selector works exactly like :nth-child except that it starts selecting elements from the opposite direction just like that annoying high school teacher who would ask questions to the class starting from the peaceful folks seated at the last benches. God I hated him. If you look at the trees drawn so far, the children are numbered left to right in each section, but this selector bloke sees the tree like so
该选择器的工作方式与：nth-child完全相同，不同之处在于它从相反的方向开始选择元素，就像那个讨厌的高中老师会从坐在最后一排的和平人们开始向班级提问一样。 上帝，我讨厌他。 如果您看到目前为止绘制的树，则在每个部分中从左到右对子级进行编号，但是此选择器按钮会看到这样的树
The children in each section are numbered right to left. So if we go ahead and apply the following style
每个部分中的子代从右到左编号。 因此，如果我们继续采用以下样式
a:nth-last-child(1) { border: 2px solid black; }the anchor elements will get selected as shown below.
锚元素将被选中，如下所示。
Quite straightforward isn’t it? This selector also very comfortably accepts formulas (of form an + b) and even/odd strings, the selections though, are made from the opposite end.
是不是很简单？ 该选择器还非常舒适地接受公式(形式为+ b)和偶数/奇数字符串，但是选择是从另一端进行的。
OK, this is where our journey together ends. You can pay for your ticket by tweeting this article to your developer buddies.
好的，我们的旅程就此结束。 您可以通过在发推文上向开发者好友发帖来支付门票费用。
I hope you enjoyed reading this and learned something new, including some shiny new English words.
我希望您喜欢阅读本文并学到一些新东西，包括一些闪亮的新英语单词。
This is Nash signing off. I’ll see you in the next article. Follow me on Twitter to keep in touch. I tweet about dev-related stuff. A lot.
这是Nash的签字。 我将在下一篇文章中见。 在Twitter上关注我以保持联系。 我在推特上发布了与开发相关的内容。 很多。
寻找更多？ 我定期在我的博客nashvail.me上发布。 到那里见，祝你好运！ (Looking for more? I publish regularly on my blog at nashvail.me. See you there, have a good one!)
翻译自: https://www.freecodecamp.org/news/explained-css-pseudo-classes-cef3c3177361/
css伪元素和伪类
188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
