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-work与nth-child相同吗？

Answer 1

nth-of-type伪选择器肯定会按预期工作。

来自MDN：

：nth-of-type（an + b）CSS伪类匹配具有的元素 a + b-1兄弟姐妹，在文档中具有相同的元素名称树

所以

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

＆＃39;工作＆＃39;因为带有类test3的div也恰好是容器中的第三个div（带有类测试的div）

然而

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

不选择test3 div，因为它不是容器中的第一个div

在这种情况下nth-of-type是否与nth-child相同？

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

通常，将伪类视为过滤器可能会有所帮助，它只匹配匹配选择器的一个子集（即冒号前选择器的一部分），当它在< strong>描述的强>状态。

所以例如.test:hover表示：选择所有带有类测试的元素 - 但只选择那些正在悬停的元素。

此处类似于nth-of-type：.test3:nth-of-type(3)表示：

选择具有类test3的所有元素，但前提是它是其容器中第3种元素。

所以请参加以下演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

请注意，第三个列表项和第三个span都是样式化的 - 因为它们都有类测试，并且是它们容器中那种元素的第三个

NB：

使用nth-of-type伪类时不使用限制type selector - 所有类型都匹配 - 就好像使用了通用选择器一样

例如：

.test:nth-of-type(3)相当于*.test:nth-of-type(3)

演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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) { ... }

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以使用.test > div:nth-of-type(1)

访问所需的单个孩子

＆＃13;

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

＆＃13;

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

＆＃13;

查看有关nth-of-type on MDN的更多信息。

Answer 3

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

不起作用，因为类型引用了div，因为没有第一个子元素作为具有 test3 类的div，所以css不会应用于它。< / p>

如果您的标记的编写方式类似于下面的示例，则选择器可以使用，但选择器

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

不会因为没有div类型的第3个元素而且类 test3

也许您通过在第一个div之前添加一些其他类型的元素来表示此选择器中类型字的重要性，如下例所示

＆＃13;

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

＆＃13;

        <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>

＆＃13;

nth-of-type不能按预期工作

3 个答案:

NB：