具有类的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;
}

,

添加一个“。” （粘性）之前。