Question

模板我正在使用在所有导航上应用css并且它会覆盖为任何其他导航编写的任何css但是我已经使用其id在这个非常特定的导航上编写了css。我已经读过最后一个css已应用，当我尝试相同的结果时。

nav {
  width: 55%;
  float: left;
}
nav ul {
  padding: 0;
  float: right;
  padding-top: 2px;
  color:#dce3e4;
}
nav li {
  display: inline-block;
  position:relative;
  margin: 0 1px;
}
nav a {
  color: #fff;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}

这是我想申请的CSS：

#nav > a {
  display: none !important;
}

#nav li {
  position: relative !important;
}

#nav > ul {
  height: 3.75em !important;
}

#nav > ul > li {
  width: 25% !important;
  height: 100% !important;
  float: left !important;
}

#nav li ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
}

Answer 1

在原始代码中有nav（HTML5标记）。在您添加的代码中，有#nav - ID。您是否真的在代码中使用<nav id="nav">这样的标签？如果没有，你必须改变它。

修改/添加：

在评论中看到您的代码之后，还有一些想法：

#nav > a规则不会应用于该代码：a的直接子项没有#nav标记
#nav li无论如何都有position: relative - 您的规则不会改变上面的规则。
#nav li ul：您的代码中没有适用于此的元素。

也许你的代码比你在这些规则适用的评论中写的更多。如果是，您应该发布您的HTML代码。但是，如果这已经是nav中的完整HTML代码，则这些是这些规则不会产生任何影响的原因。

Answer 2

您发表评论说您的HTML结构如下所示：

<nav id="nav"> 
    <ul> 
        <li><a href="/">Design</a></li> 
        <li><a href="/">HTML</a></li> 
        <li><a href="/">CSS</a></li> 
        <li><a href="/">JavaScript</a></li> 
    </ul> 
</nav>

您正在尝试选择元素，例如：

#nav > a {
    display: none !important;
}

>字符指向父级的直接子级的元素。例如，您没有<a>元素作为#nav的直接子元素。这就是为什么你的CSS没有被选中的原因。

如何通过id

2 个答案: