Question

我有这样的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/

但是，如果我将三个头元素的标记更改为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选择器是否与标记类型相关？

Answer 1

简短回答：你说得对。 type中的nth-of-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>

混淆css伪选择器

1 个答案: