nth-of-type不像预期的那样工作

Question

<div class="test">
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
</div>

为什么？

.test3:nth-of-type(3) {height: 100px;background: black;}

工作，然而

.test3:nth-of-type(1) {height: 100px;background: black;}

不是吗？在这种情况下，nth-type-of和nth-child的作用是相同的吗？

- Ben

---

你只有一个 test3，为什么要使用 nth-of-type？ - Carl Binalla

它应该是 .test:nth-of-type(1){} .test:nth-of-type(3){}.......... - Sahil Dhir

只给一个简单的例子，我在其他案例中找到了这个？我想知道原因。 - Ben

Answer 1

第 n 个类型的伪选择器在这里按预期工作。

来自 MDN:

:nth-of-type(an+b) CSS 伪类匹配在文档树中它之前有 an+b-1 个相同元素名称的兄弟元素的元素

因此

.test3:nth-of-type(3) {height: 100px;background: black;}

"

'works'是因为具有class为test3的div恰好也是容器（class为test的div）中的第三个div。

然而，

"

.test3:nth-of-type(1) {height: 100px;background: black;}

由于它不是容器中的第一个div，因此不选择test3 div。

在这种情况下，nth-of-type和nth-child的工作方式相同吗？

在这种情况下，它们是相同的，因为容器中的所有子元素都是div。

---

一般来说，我们可以将伪类看作是一个过滤器，它只匹配选择器的子集（即冒号前面的部分），当它处于伪类所描述的状态时。

例如，.test:hover 表示：选择所有具有 class 为 test 的元素 - 但只选择正在被悬停的元素。

同样地，在这里 nth-of-type: .test3:nth-of-type(3) 表示：

选择所有具有 class 为 test3 的元素，但仅当它是其容器中该类型元素的第三个时。

因此，请看以下演示：

.test:nth-of-type(3) {
  color:red;
}

<div>
  <ul>
    <li class="test">li 1</li>
    <li class="test">li 2</li>
    <li class="test">li 3</li>
    <li class="test">li 4</li>
    <li class="test">li 5</li>
  </ul>
  <span class="test">span 1</span>
  <span class="test">span 2</span>
  <span class="test">span 3</span>
  <span class="test">span 4</span>
  <span class="test">span 5</span>
</div>

请注意，第三个列表项和第三个span都被样式化了 - 这是因为它们都有test类，并且是容器中该类型元素的第三个

NB：

当使用未限制类型选择器的nth-of-type伪类时 - 所有类型都会匹配 - 就像使用通用选择器一样。

例如：

.test:nth-of-type(3) 等同于 *.test:nth-of-type(3)

演示：

.test:nth-of-type(3) {
  color:red;
}

<div>
  <fred class="test">fred 1</fred>
  <div class="test">div 1</div>
  <span class="test">span 1</span>
  <p class="test">p 1</p>
  <p class="test">p 2</p>
  <p class="test">p 3</p>
  <p class="test">p 4</p>
  <span class="test">span 2</span>
  <fred class="test">fred 2</fred>
  <fred class="test">fred 3</fred>
  <span class="test">span 3</span>
</div>

- Danield

---

谢谢！没错。顺便问一下，你有什么办法可以选择类似"nth-of-class"这样的东西吗？ - Ben

不幸的是，CSS 没有 nth-of-class 选择器 - 参见此帖子。 - Danield

很好的答案，解释得很清楚！ - andreas

Answer 2

您在选择器中使用了 .test3，但是在您的标记中只出现了一次类 .test3。所以没有其他的 .test3 元素。

您可以使用 .test > div 来访问您的直接子 div。

此外，nth-of-type 的模式为 :nth-of-type( <an-plus-b> )。因此，您可以直接使用。

.test > div:nth-of-type(2n+1) { ... } /* or */
.test > div:nth-of-type(odd) { ... }

获取第一个和第三个（每隔一个）元素。

.test>div {
  margin: 10px;
  padding: 10px;
}

.test > div:nth-of-type(2n+1) {
  height: 100px;
  background: black;
  color: white;
}

<div class="test">
  <div class="test1">1</div>
  <div class="test2">2</div>
  <div class="test3">3</div>
</div>

您也可以使用.test > div:nth-of-type(1)直接访问所需的单个子元素：

.test>div {
  margin: 10px;
  padding: 10px;
}

.test > div:nth-of-type(1) {
  height: 100px;
  background: black;
  color: white;
}

<div class="test">
  <div class="test1">1</div>
  <div class="test2">2</div>
  <div class="test3">3</div>
</div>

查看关于 MDN上nth-of-type的更多信息。

- andreas

Answer 3

.test3:nth-of-type(1) {height: 100px;background: black;}

此代码未生效是因为类型指的是 div，由于您没有具有 class 为 test3 的 div 的第一个子元素，因此 CSS 没有应用到它。

如果您的标记如下所示，选择器将起作用，但选择器

.test3:nth-of-type(3) {height: 100px;background: black;}

由于没有类型为div且类为test3的第三个元素，因此不会发生任何事情。

也许您可以通过在第一个div之前添加一些其他类型的元素来理解此选择器中类型词的重要性，例如下面的示例。

.test3:nth-of-type(1) {height: 100px;background: black; color: #fff;}

        <div class="test">
         <p class="paragraph">1st eleement of paragraph type</p>
         <div class="test3">1st element of div type</div>
         <div class="test2">2nd element of div type</div>
         <div class="test1">3rd element of div type</div>
        </div>

- BozanicJosip