对css伪选择器感到困惑答案

【问题标题】：Confuse about css pseudo selector对css伪选择器感到困惑
【发布时间】：2014-01-04 16:58:23
【问题描述】：

我有一个这样的 dom 结构：

<div id="main">
    <div class="clear"></div>
    <div class="search"></div>
    <div class="scan"></div>

    <div class="topbook"></div> <!--select this one-->
    <div class="topbook"></div> 
    <div class="topbook"></div>
    <div class="topbook"></div>
</div>

我想用css伪选择器选择第一个.topbook元素：

$("body .topbook:nth-of-type(1)").length // 0

但选择 dom 长度为零：http://jsfiddle.net/HGym3/

但是，如果我将三个 head 元素的标签更改为 p:

<div id="main">
    <p class="clear"></p>
    <p class="search"></p>
    <p class="scan"></p>

    <div class="topbook"></div> <!--select this one-->
    <div class="topbook"></div> 
    <div class="topbook"></div>
    <div class="topbook"></div>
</div>

选择器可以工作：http://jsfiddle.net/HGym3/1/

有什么区别？ nth-of-type 选择器是否与标签类型相关？

【问题讨论】：

我知道这不是您想要做的，但它确实有效：只需执行 $('body .topbook')[index]

标签： jquery jquery-selectors css-selectors

【解决方案1】：

简短的回答：你完全正确。 nth-of-type 中的 type 是标签。 MDN reference.

一个可能简单的解决方法是将您的 .topbook div 包装在另一个 div 中；这将为您提供您正在寻找的效果，没有太多麻烦。

<div id="main">
    <div class="clear"></p>
    <div class="search"></p>
    <div class="scan"></p>

    <div>
        <div class="topbook"></div> <!--select this one-->
        <div class="topbook"></div> 
        <div class="topbook"></div>
        <div class="topbook"></div>
    </div>
</div>

【讨论】：