jQueryUI 自动完成 : how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

Question

如何设计第一个和最后一个悬停 li 元素的样式？在 CSS 代码上它只显示#ui-active-menuitem，这意味着只有一个规则来设置悬停样式。这对我的设计不利，因为我使用圆 Angular ，我希望第一个 li 悬停也有圆顶 Angular ，最后一个 li 悬停有圆底 Angular 。

CSS 显示的唯一规则是:

#ui-active-menuitem{
    background-color: #CCC
    color: #F0F0F0;
    z-index:-5;
}

我在查看 jQueryUI Autocomplete 的代码，发现它只实现了一种悬停情况:

this.active = a.eq(0).children("a").addClass("ui-state-hover").attr("id", "ui-active-menuitem").end();

现在，因为我只能为 hover li 元素使用一个通用类，它看起来像这样，没有圆形悬停，在 3px 底部圆 Angular 上看起来很奇怪: http://i.stack.imgur.com/2EgsK.jpg

我在 CSS 的静态 html 页面中单独实现了自己的实现，其中我使用 first-of-type 和 last-of-type 使悬停在顶部和底部的 Angular 落变圆，看起来像这样: http://i.stack.imgur.com/bk6RA.jpg

如何使用 jQuery UI 自动完成功能在 #ui-active-menuitem 上应用/实现 first-of-type 和 last-of-type？

谢谢大家!

Answer 1

anchor 标签得到.ui-state-hover和 id="ui-active-menuitem"但也有包含 <li>和 <ul>考虑。结构是这样的(只包含相关细节):

<ul class="ui-autocomplete">
    <li class="ui-menu-item">
        <a>...</a>
    </li>
    <li class="ui-menu-item">
        <a>...</a>
    </li>
    <li class="ui-menu-item">
        <a class="ui-state-hover" id="ui-active-menuitem">...</a>
    </li>
</ul>

所以你可以在你的 CSS 中做这样的事情:

ul.ui-autocomplete li.ui-menu-item:first-child a#ui-active-menuitem {
    border-radius: 3px 3px 0 0;
}

ul.ui-autocomplete li.ui-menu-item:last-child a#ui-active-menuitem {
    border-radius: 0 0 3px 3px;
}

仅调整自动完成列表中第一个或最后一个事件元素的 Angular 。