Web设计师CSS3伪类指南 _ 厦门创意互动网络科技有限公司

的伪类被用于靶向元件，而无需添加额外的类，属性或ID; 这就是为什么以这种方式调用伪类。纵观我们先前的文章中，我们已经覆盖了几个新的CSS3 伪类，包括:not，:before和:after，:first-of-type我们也使用伪类在我们的一些教程。

在这篇文章中，我们将介绍其他尚未涉及的新CSS3 伪类。让我们来看看。

：第n个孩子

:nth-child用于以其父级的特定顺序来定位元素。这个伪类结合使用具有以下参数：一个数字（1，2，3，等），关键字（奇 / 偶数）或公式（an，an+b，an-b等）。在下面的示例中，我们在一个内部有三个段落<div>。

<div>

<p><strong>Paragraph 1:

</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>

<p><strong>Paragraph 2:

</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>

<p><strong>Paragraph 3:

</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>

<div>

假设我们想在第二段添加样式，我们可以按如下方式编写样式规则。

p:nth-child(2) {
padding: 15px;
background-color: #333;
color: #fff;
}

我们也可以使用一个等式来选择第2,4,6段以及该序列中的以下数字。我们可以用这种方式编写样式规则。

li:nth-child(2n) {
padding: 5px;
background-color: #333;
color: #fff;s
margin: 10px 0; 
}

n上面等式中的符号表示序列号（0,1,2,3等）。在上面的例子中，2将乘以n，结果如下：

2（0）= 0（什么都不选）
2（1）= 2（选择第二个子元素）
2（2）= 4（选择第4个子元素）
2（3）= 6（选择第6个子元素）
……等

要查看它在不同的等式中的工作原理，可以使用此工具，称为第n个测试器。

但是，为了使这个伪类准确地选择子元素，元素顺序不应该以其他元素类型开头。给出以下HTML标记作为示例，我们有三个段落。我们在第一段之后插入<blockquote>元素：

<div>
<p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>
<blockquote>
<p><strong>Blockquote</strong> Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.</p>
</blockquote>
<p><strong>Paragraph 2:</strong>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</p>
<p><strong>Paragraph 3:</strong> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</p>
</div>

现在，如果我们选择具有以下样式规则的第二段。

p:nth-child(2) {
padding: 15px;
background-color: #333;
color: #fff;
}

不会应用任何内容，因为第二个子元素现在已替换为<blockquote>。

：第n-最后孩子

该:nth-last-child 伪类的作品一样:nth-child，只是现在，顺序从最后一个孩子开始。

所以，当我们在下面应用这种风格时：

p:nth-last-child(1) {

padding: 15px;

background-color: #333;

color: #fff;

}

应用的元素是其父级的最后一个段落元素。

：第n-最后型 –

:nth-last-of-type:first-of-type我们在上一篇文章中讨论的方式类似。

它选择指定的子元素，即使序列被其他元素类型中断也是如此。类似于:nth-last-child序列将从最后一个元素开始。在下面的示例中，我们将段落，blockquote和under-ordered列表包含在a中<div>。

<div>

<p><strong>Paragraph 1:</strong>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>

<blockquote>

<p><strong>Blockquote</strong

> Oat cake sugar plum tiramisu jelly cupcake dragee powder. Caramels pastry pie danish fruitcake bonbon chocolate cake bear claw.</

p>

</blockquote>

<p><strong>Paragraph 2:</strong

>Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes. Topping croissant tiramisu pie jelly-o pudding.</

p>

<p><strong>Paragraph 3:</strong

> Oat cake pastry chocolate dessert brownie wafer candy. Caramels chocolate cake marzipan. Biscuit candy pudding dessert brownie dragee halvah donut gummi bears.</

p>

<ul>

<li><strong>List 1:</strong> Cotton candy apple pie topping.</li>

<li><strong>List 2:</strong> Biscuit gummi bears sweet</li>

<li><strong>List 3:</strong> Jujubes fruitcake bear claw chocolate bar.</li>

<li><strong>List 4:</strong> Tart carrot cake cookie marzipan pastry toffee.</li>

<li><strong>List 5:</strong> Wafer tiramisu marzipan tart.</li>

<li><strong>List 6:</strong> Halvah chocolate bar.</li>

<li><strong>List 7:</strong> Toffee sugar plum.</li>

<li><strong>List 8:</strong> Caramels pastry pie.</li>

</ul>

</div>

要从上面的HTML结构中选择最后一个段落，我们可以用这种方式编写规则。

p:nth-last-of-type(2) {
padding: 15px;
background-color: #333;
color: #fff;
}

不同于:nth-child或:nth-last-child其中它们的序列严格选择元件，所述-of-type 伪类也会发现在他们的指定类型的元素。请参阅以下链接中的演示，以查看上面的示例。

：唯一的孩子

在:only-child用于选择指定的元素，这是其母公司的唯一的孩子。想象一下，一个家里只有一个孩子的父母。同样，在下面的例子中，我们只有一个段落<div>。

<div>

<p>Tiramisu gummi bears faworki dragee. Faworki faworki dessert sweet. Souffle powder biscuit lemon drops topping wypas.</p>

</div>

要为此段落定位和添加样式，我们可以写：

p:only-child {
padding: 15px;
background-color: #333;
color: #fff;
}

但是，当我们有更多类型的子元素时，这pseudo-class将无法工作，因为指定的元素不再是其父元素下的唯一子元素。

Web设计师CSS3伪类指南

Web设计师CSS3伪类指南

：第n个孩子

：第n-最后孩子

：第n-最后型 –

：唯一的孩子

相关网站建设文章