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 > a {

Answer 2

我尝试使用他们的个人为嵌套列表项添加CSS ID没有运气

您需要定位a元素以覆盖特定于页面的CSS。像这样：

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

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

2 个答案:

纯CSS