Запутаться насчет псевдо-селектора CSS

0

У меня есть такая структура:

<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 связан с типом тега?

  • 0
    Я понимаю, что это не то, что вы хотите сделать, но это работает: просто сделайте $('body .topbook')[index]
Теги:
css-selectors
jquery-selectors

1 ответ

1

Короткий ответ: вы совершенно правы. type в nth-of-type - это тег. Ссылка MDN.

Возможно, легкое исправление заключается в том, чтобы обернуть ваши .topbook в другой 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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню