css3伪元素::_CSS伪类：基于元素索引的样式-程序员宅基地
技术标签： ViewUI python css java javascript css3
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：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<style type="text/css">
body {
font: 16px / 1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
</head>
<body>
<h2>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>
</ul>
</body>
</html>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()也是功能性的伪类。 他们接受一个参数，该参数应为：
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伪类与元素匹配(如果它们是另一个元素的唯一子元素)。 以下是两个无序列表。 第一个包含一个项目，第二个包含三个项目：
<ul>
<li>Apple</li>
</ul>
<ul>
<li>Orange</li>
<li>Banana</li>
<li>Raspberry</li>
</ul>Using li:only-child{color: #9c27b0;} will select <li>Apple</li>, 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;}将选择<li>Apple</li> ，因为它是我们第一个列表中的唯一子项。 但是，第二个列表中的所有项目都不匹配，因为有三个同级。 您可以在下面看到它的外观。
：空 (: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, <p></p> will match, but <p> </p> will not.
也可以使用:empty伪类选择没有子元素的元素。 现在，当我们说:empty ，我们的意思是空的 。 为了使元素匹配:empty伪类，它不能包含任何其他内容，甚至不能包含空格。 换句话说， <p></p>将匹配，但<p> </p>将不匹配。
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上查看示例。 这两个项目都是了解这些伪类的绝妙方法。
翻译自: https://www.sitepoint.com/css-pseudo-classes-styling-elements-based-on-their-index/
css3伪元素::
智能推荐
zbbz插件使用教程_CAD坐标自动标注zbbz插件非常实用（附压缩包及安装步骤）-程序员宅基地
文章浏览阅读1.2w次。cad坐标标注zbbz插件是一款专门和cad软件配套使用的应用程序，主要是用来帮助用户在使用cad画图的过程当中，能够快速的进行坐标的定位等等，方便用户工作，非常的实用！有需要的朋友快来下载吧！cad坐标标注插件zbbz.vlx是一款可以应用于AutoCAD2004-2008软件上的实用型插件，可免费使用，能够对cad图纸进行自动坐标标注，非常的简单实用。cad插件使用方法1、下载解压，得到cad..._zbbz插件怎么安装到cad
CANopen协议介绍（讲义）_canopen和canlink-程序员宅基地
文章浏览阅读6.2k次，点赞11次，收藏47次。很长一段时间以来，很多人问我CANopen总线优势到底在什么地方，我也大体的给了口头的讲述，但是比较笼统，没办法做到详细解释，加上纯技术的话语比较晦涩，遇上内行还能多聊几句，如果是刚接触的，那就是云里雾里了。这次正好要进行公司业务员培训，要讲讲CANopen，在整理过程中把我的讲义贴出来，希望能帮到大家，以下内容是我讲课的口述内容，比较白话，不能作为资料，大家见谅，鉴于我整理也比较辛苦，也算个小小_canopen和canlink
Java入门必刷的基础题1（八道）-程序员宅基地
文章浏览阅读185次，点赞26次，收藏19次。下面的源码大多只有方法体，需要自己补全类之后才能用。
【转载】Jar包冲突问题及解决方案_一个项目不同模块可以使用不同的jar包吗-程序员宅基地
文章浏览阅读2.6k次。作者：sherlockyb 链接：https://www.jianshu.com/p/100439269148 关于JAR包冲突问题，几乎是码农经常会遇到的问题，博客看到这篇文章，总结的非常棒，以下是转载的原文概述Jar包冲突是老生常谈的问题，几乎每一个Java程序猿都不可避免地遇到过，并且也都能想到通常的原因一般是同一个Jar包由于maven传递依赖等原因被引进了多个不同的版..._一个项目不同模块可以使用不同的jar包吗
matlab无法打开excel的问题_matlab无法激活工作表-程序员宅基地
文章浏览阅读1.1w次，点赞4次，收藏13次。matlab无法打卡excelproblem怎么解决problem重装系统时直接移植了matlab和office两个大套件，之前用matlab调用读取电子表格一直没有什么问题，今天在统计手机上网流量的时候想用matlab对表格里的单位处理一下，好家伙这玩意给我报错把我搞懵逼了。是太久没用了突然今天停工出问题来抗议吗？表现如下：以及怎么解决找了半天问题终于妥妥搞定，下面来讲一下怎么解决。不是matlab的问题，是excel的com加载项出了毛病。1.在office安装的根目录找到excel._matlab无法激活工作表
Bean拷贝_java bean拷贝-程序员宅基地
文章浏览阅读1.3k次。因为基础的BeanUtils在使用时拷贝非常不方便，还需要我们自己去创建新的User拷贝，对List集合的拷贝还需要我们自己去遍历，这里我们封装工具类来实现这些功能。VO是后端将前端查询的字段数据封装成VO返给前端，使用Bean拷贝可以实现：将前端查询实体对象转为VO对象。DTO是封装前端传回来的字段，使用Bean拷贝可以实现：将前端传入Dto对象转为实体类对象。注意：两个对象中对应字段名和类型应完全相同，否则无法拷贝。将source中的字段添加到target中。第一个是参数对象，第二个是目标对象。_java bean拷贝
随便推点
鸿蒙系统笔记本产业链,鸿蒙系统笔记本电脑要来了？！-程序员宅基地
文章浏览阅读309次。近日，华为在伦敦举办了一场媒体活动，主要介绍了华为鸿蒙系统(HarmonyOS)特性。此外，华为全球高级产品经理Peter Gauden还向媒体透露了一些有关鸿蒙系统产品的信息，他表示鸿蒙系统在荣耀智慧屏上首秀之后，未来还会登陆海外市场发售的笔记本电脑和智能手表设备。根据外媒报道，基于鸿蒙OS的智能手表将率先发布，并且很可能会在9月19日与华为Mate 30系列一同发布，而且很可能搭载于Watch..._笔记本上的鸿蒙
微信小程序nodejs+python+php+vue 房屋租赁管理系统_php在线房产管理系统源码 uniapp租房管理系统 h5+app+小程序-程序员宅基地
文章浏览阅读142次。房屋租赁的管理，已经成为帮助求租者和房屋租赁方管理出租房屋的一个重要的形式存在，通过房屋租赁系统的管理，能够对房屋的租赁情况，入住办理以及房屋公告等信息进行整体的管理。本系统是基于网络后台的管理系统，分为了管理员和注册用户两大用户权限，各尽其责，以蓝色的界面为主要的界面风格，系统的登录界面，_php在线房产管理系统源码 uniapp租房管理系统 h5+app+小程序
将安全性信息应用到以下对象时发生错误”解决办法_将安全信息应用到以下对象时发生错误-程序员宅基地
文章浏览阅读10w+次，点赞17次，收藏20次。将安全性信息应用到以下对象时发生错误”解决办法要夺取所有权时，点“安全”添加用户并允许所有权限后点击“应用”， 一直“无法保存对。。。（文件夹名）权限所在的更改。拒绝访问”啊必须先点击“高级”，把“允许父项的继承权限传播到该对象所有子对象。。”的复选框的勾取消后，才可以夺权。夺权后才将“父项允许的继承权限传播到该对象所有子对象。。”和“用在此显示的可以应用到子对象的项目代替所有子对象的权限_将安全信息应用到以下对象时发生错误
知识竞赛抢答环节开始前为什么要测试抢答器-程序员宅基地
文章浏览阅读195次。抢答环节是知识竞赛中较为关键且拉分最大的环节，所以选手都非常重视。因此，在正式抢答之前安排一个测试抢答器的环节非常必要，这样一来，各选手就不会怀疑自己的抢答设备有问题了。即使抢答前测试了设备，可能抢答过程中还是有队伍提出来说设备有问题，这时系统要可以随机停止抢答，单独测试质疑的选手的抢答器。其实抢答器设备是不会轻易坏的。测试抢答先要一个一个队依次按顺序来按，这样容易判断各个设备情况，最后也可以来一次全部按的测试，系统会列出各个队的抢答时间及顺序，不过这种测试意义不是很大，一般有一个一个队依次测试就够了。
计算机基础知识900题有答案,《计算机应用基础》第一学期试题-程序员宅基地
文章浏览阅读549次。可以作为期末考试的试卷《计算机应用基础》第一学期试题一、选择题 (每空1分，共20分)请在相应栏内填上一个正确答案的标号，例 A 。1、世界上第一台按存储程序控制功能设计的计算机 。A ENIAC B EDVAC C EDSAC DUNIVAC-I2、 某编码方案用10位二进制数进..._地址是内存储器各存储单元的编号,4096个存储地址,用十六进制表示它的地址范围是:
java 面试题dubbo,6、dubbo面试题大全含答案-程序员宅基地
文章浏览阅读48次。dubbo面试题大全含答案1、[Dubbo与DubboX区别](http://www.wityx.com/post/490_1_1.html)2、[Dubbo中zookeeper做注册中心，如果注册中心集群都挂掉，发布者和订阅者之间还能通信么？](http://www.wityx.com/post/264_1_1.html)3、[Dubbo中有哪些角色？](http://www.wityx.com..._jses6面试题