Question

我找不到正确的CSS选择器我需要一个jQuery来检测焦点是否离开子菜单的最后一个子节点（.blur）我尝试了一些类似的东西：

$('.responsive-nav > ul > li:last-child').blur(function (e) {

但我猜这里我做错了什么。如果需要，您可以在下面找到普通代码和Js小提琴中的Html。

这种情况下正确的css选择器是什么？还有一些关于css选择器的好文档，我可以自己更好地学习它吗？

非常感谢任何帮助。

<nav id="topNav">
    <div class="wrapper">
        <div class="responsive-nav">
            <div class="responsiveModus"></div>
            <!--BeginNoIndex-->
            <ul id="nav">
                <li class="Item01 level1">
                    <div tabindex="1" class="box">
                        <a href="#" title="Mainpage1"><span>Mainpage1</span></a>
                        <div class="subNav">
                            <ul>
                                <li><a href="#" title="Subpage1"><span>Subpage1</span></a>
                                </li>
                                <li><a href="#" title="Subpage2"><span>Subpage2</span></a>
                                </li>
                                <li><a href="#" title="Subpage3"><span>Subpage3</span></a>
                                </li>
                                <li><a href="#" title="Subpage4"><span>Subpage4</span></a>
                                </li>
                                <li><a href="#" title="Subpage5"><span>Subpage5</span></a>
                                </li>
                                <li><a href="#" title="Subpage6"><span>Subpage6</span></a>
                                </li>
                                <li><a href="#" title="Subpage7"><span>Subpage7</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="Item02 level1">
                    <div class="box">
                        <a href="#" title="Mainpage2"><span>Mainpage2</span></a>
                        <div class="subNav">
                            <ul>
                                <li><a href="#" title="Subpage1"><span>Subpage1</span></a>
                                </li>
                                <li><a href="#" title="Subpage2"><span>Subpage2</span></a>
                                </li>
                                <li><a href="#" title="Subpage3"><span>Subpage3</span></a>
                                </li>
                                <li><a href="#" title="Subpage4"><span>Subpage4</span></a>
                                </li>
                                <li><a href="#" title="Subpage5"><span>Subpage5</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <!--EndNoIndex-->
        </div>
    </div>
</nav>

Fiddle here

提前致谢。

Answer 1

你需要选择这样使用：

$('.responsive-nav > ul > li li:last-child').css('background','red');

see more for css selector

E > F   Matches any F element that is a child of an element E.

E F Matches any F element that is a descendant of an E element.

Answer 2

我认为这会有效$(".subNav>ul>li:last-child")

为最后一个孩子找到正确的CSS选择器来添加Jquery

2 个答案: