如何解决具有类的CSS ID-父选择器
HTML是:
父母:
div id =“ sticky-header-sticky-wrapper” class =“ sticky-wrapper is-sticky” style =“ height:149px;”
孩子:
nav id =“ site-navigation” class =“ main-navigation clearfix” role =“ navigation” aria-label =“ Main Menu”
我正在尝试隐藏网站导航。在这里选择属性的正确方法是什么。我尝试过:
#sticky-header-sticky-wrapper.sticky-wrapper是粘性的#site-navigation {display:none;}
解决方法
当要定位的同一个节点有多个类时,必须为每个类使用点符号,例如.class1.class2 { ... }
。
您可以针对用例执行以下操作:
#sticky-header-sticky-wrapper.sticky-wrapper.is-sticky #site-navigation {
display: none;
}
<div id="sticky-header-sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 149px;">
<nav id="site-navigation" class="main-navigation clearfix" role="navigation" aria-label="Main Menu">NAV</nav>
<div>NOT NAV</div>
</div>
但是另一种替代方法是简单地将id
作为目标,因为这应该是唯一的(并不总是坚持要成为开发人员)。
在这种情况下,其工作原理相同:
#site-navigation {
display: none;
}
,
#sticky-header-sticky-wrapper.sticky-wrapper.is-sticky #site-navigation {
display:none;
}
不要这样做,因为这会使选择器的特异性太大,因此,如果以后需要覆盖它,则需要提出一个具有更大特异性的选择器。
我建议只使用类选择器,如下所示:
.main-navigation: {
display:none;
}
通过这种方式,选择器更易于阅读,并且CSS特异性更低,这意味着您可以使用另一个类选择器非常轻松地覆盖它。
,该ID是唯一的,您可以肯定这样做:
div.sticky-wrapper.is-sticky #site-navigation{
display:none;
}
或
div#sticky-header-sticky-wrapper.sticky-wrapper.is-sticky #site-navigation {
display:none;
}
但是最好,最简单的方法是
#site-navigation{
display:none;
}
,
添加一个“。” (粘性)之前。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。