导航的 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'});
});
任何见解将不胜感激。谢谢!
最佳答案
使用children('a')
选择选择器内的所有a
标签
$('#iamhere').children('a').css({'color': '#061AFF', 'text-decoration': 'none'});
注意:Children()
比 find()
更快,因为它只搜索其第一级元素
纯CSS
要更改 css 本身,请使用直接子选择器 >
#iamhere > {
关于jquery - 使用 jquery 覆盖嵌套列表中的 CSS 继承,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41026317/