CSS :nth-of-type() 选择器和 :not() 选择器

在本文中，我们将介绍CSS的两个有用的选择器：:nth-of-type()和:not()。这些选择器可以帮助我们对HTML元素进行更精确的选择，使得我们可以更好地控制网页的样式和布局。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

:nth-of-type()选择器

:nth-of-type()选择器可以用来选择某一类型的元素中的特定位置的元素。它的基本语法是：

element:nth-of-type(n)

其中，element表示要选择的元素类型，n表示要选择的元素在同类型元素中的位置。:nth-of-type()选择器使用的是数学的逻辑，即n从1开始计数，并且递增1。

让我们来看一个具体的例子来理解它的用法。假设我们有一个包含多个段落的HTML文档：

<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>

如果我们想让第二个段落的文字颜色变成红色，可以这样写CSS代码：

p:nth-of-type(2) {
  color: red;
}

这样，第二个段落的文字就会变成红色。

:nth-of-type()选择器还可以与其他选择器结合使用，以选择更复杂的元素。例如，我们可以使用:nth-of-type()选择器选择父元素下的特定位置的子元素：

div p:nth-of-type(3) {
  color: blue;
}

上述代码会将第一个div中的第三个段落的文字颜色变为蓝色。

:not()选择器

:not()选择器允许我们选择除了指定元素以外的其他所有元素。其基本语法是：

:not(selector)

其中，selector表示要排除的元素选择器。可以是元素类型选择器、类选择器、ID选择器等。

让我们看一个例子来理解:not()选择器的用法。假设我们有一个HTML文档包含多个段落元素和一个特定类名为”highlight”的元素：

<p>第一个段落</p>
<p>第二个段落</p>
<p class="highlight">第三个段落</p>

如果我们想选择所有不带有highlight类的段落元素，并将它们的文字颜色设置为灰色，可以这样写CSS代码：

p:not(.highlight) {
  color: grey;
}

这样，带有highlight类的段落元素的文字颜色仍为默认颜色，而其他段落元素的文字颜色就会变为灰色。

:not()选择器也可以与其他选择器结合使用，以选择更复杂的元素。例如，我们可以使用:not()选择器排除特定类型的元素：

p:not(:first-of-type) {
  font-weight: bold;
}

上述代码会将除了第一个段落以外的所有段落元素的字体加粗。

总结

在本文中，我们介绍了CSS的两个有用的选择器：:nth-of-type()和:not()。:nth-of-type()选择器可以选择某一类型的元素中的特定位置的元素，是一个非常强大的选择器。:not()选择器允许我们选择除了指定元素以外的其他所有元素，帮助我们更好地控制网页的样式和布局。通过学习和灵活运用这些选择器，我们可以提高我们的CSS技能，创建更具有个性化和创意的网页。