jquery - 使用 jquery 覆盖嵌套列表中的 CSS 继承

Question

导航的 HTML:

<nav>
    <ul>
        <li id="navpart1"><a href="index.html">Home</a></li>
        <li id="navpart2"><a href="destinations.html">Destinations</a>
            <ul>
                <li id="navpart3"><a href="#">London</a></li>
                <li id="navpart4"><a href="#">Rome</a></li>
                <li id="navpart5"><a href="#">Paris</a></li>
                <li id="navpart6"><a href="#">Venice</a></li>
                <li id="navpart7"><a href="#">Edinburgh</a></li>
            </ul>
            </li>
        <li id="navpart8"><a href="#">Blog</a></li>
        <li id="navpart9"><a href="#">Contact</a></li>
    </ul>
</nav>

我正在使用以下 jquery 为当前页面的导航添加特殊的 CSS 样式:

$(document).ready(function(){
        var mybodyid = $('body').attr('id');
        var mynavid = '#nav' + mybodyid;
        $(mynavid).attr('id','iamhere');
        $('ul ul').hide();
        $('#iamhere').parents().show();
        $('#iamhere').children().show();
    });

当前页面的特殊 CSS 样式:

#iamhere a {
color: #ff0000; 
text-decoration: underline;
}

jquery 有效，但嵌套列表也继承了特殊的 CSS(见图片。)在该图片中，我在“目的地”页面上，所以我希望“目的地”导航链接为红色，而所有其他链接保持我已经在我的 CSS 文档中设置的链接样式。

Example of the issue with nested lists inheriting CSS

我尝试使用各自的 ID 为嵌套列表项添加 CSS，但没有成功:

#navpart3, #navpart4, #navpart5, #navpart6, #navpart7 {
color: #061AFF;
text-decoration: none;
} 

我还尝试添加 jquery 来更改 #iamhere 的子项的颜色，但这也不起作用:

$('#iamhere').children.css({'color': '#061AFF', 'text-decoration': 'none'});
    });

任何见解将不胜感激。谢谢!

Answer 1

使用children('a')选择选择器内的所有a标签

$('#iamhere').children('a').css({'color': '#061AFF', 'text-decoration': 'none'});

注意:Children() 比 find() 更快，因为它只搜索其第一级元素

纯CSS

要更改 css 本身，请使用直接子选择器 >

#iamhere > {