为什么nth-of-type不工作？ [英] Why doesn't nth-of-type work?

问题描述

我有以下HTML：

 < section class =history> 
< div class =asked> 
< h1 class =user-show-tab-title>问题< / h1> 
< div> 
< ul class =question-index-false>< / ul> 
< / div> 
< / div> 
< div class =answered> 
< h1 class =user-show-tab-title>答案< / h1> 
< div> 
< ul class =question-index-false>< / ul> 
< / div> 
< / div> 
< / section> 
  

我拼命地试图选择第二个 h1 元素与类用户显示标签标题（具有答案）
但由于某种原因 .user-show-tab-title：nth- （1）选择它们和 .user-show-tab-title：nth-​​of-type（2）选择任何内容。

这是什么？

解决方案

在

中的 h1 类型。 nth-of-type 仅适用于直接子关系。

第n个相关选择器从1开始，因此选择第二个，您将使用2，而不是1.。

我不知道您的实际HTML ，但你可以使用

  .answered .user-show-tab-title 
  

如果你真的想使用 nth-of-type 如何使用它。我插入一些虚拟< p> 否则，< section> 的所有子相同类型。

  .history div：nth-​​of-type（1）.user-show-tab-title {background-color： lightblue;}。history div：nth-​​of-type（2）.user-show-tab-title {background-color：#eee;}  

 < section class =history> < p>虚拟段落< / p> < p>虚拟段落< / p> < div class =asked> < h1 class =user-show-tab-title>问题< / h1> < div> < ul class =question-index-false>< / ul> < / div> < / div> < p>虚拟段落< / p> < p>虚拟段落< / p> < p>虚拟段落< / p> < div class =answered> < h1 class =user-show-tab-title>回答< / h1> < div> < ul class =question-index-false>< / ul> < / div> < / div> < / section>  

I have the following HTML:

<section class="history">
  <div class="asked">
    <h1 class="user-show-tab-title">Questions</h1>
    <div>
      <ul class="question-index-false"></ul>
    </div>
  </div>
  <div class="answered">
    <h1 class="user-show-tab-title">Answers</h1>
    <div>
      <ul class="question-index-false"></ul>
    </div>
  </div>
</section>

I'm desperately trying to select and style the 2nd h1 element with the class "user-show-tab-title" (the one with "answers") but for some reason .user-show-tab-title:nth-of-type(1) selects them both and .user-show-tab-title:nth-of-type(2) doesn't select anything.

What gives?

解决方案

That's because they are both the first of type h1 within a div. nth-of-type applies only to immediate child relationship.

Also note that the nth related selectors start at 1, so to select the second you would use 2, not 1.

I don't know your actual HTML, but for what you have, you can just use

.answered .user-show-tab-title

If you really want to use nth-of-type, here's how you can use it. I'm inserting some dummy <p>s otherwise, all the children of <section> would be of the same type.

.history div:nth-of-type(1) .user-show-tab-title {
    background-color: lightblue;
}

.history div:nth-of-type(2) .user-show-tab-title {
    background-color: #eee;
}

    <section class="history">
      <p>Dummy paragraph</p>
      <p>Dummy paragraph</p>
      <div class="asked">
        <h1 class="user-show-tab-title">Questions</h1>
        <div>
          <ul class="question-index-false"></ul>
        </div>
      </div>
      <p>Dummy paragraph</p>
      <p>Dummy paragraph</p>
      <p>Dummy paragraph</p>
      <div class="answered">
        <h1 class="user-show-tab-title">Answers</h1>
        <div>
          <ul class="question-index-false"></ul>
        </div>
      </div>
    </section>

这篇关于为什么nth-of-type不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！