Question

因此我从未正式了解如何使用特定名称为ul和子li制作导航菜单。我创建了一个完成的菜单on codepen。除了我需要给所有的css一个特定的名字。

现在，例如，我有。

<ul id="nav">
<li>
  Small
  <ul>
      <li>link here</li>
  </ul>
</li>
</ul>

示例css

#nav {
  text-align: left;
  display: inline;
  margin: 0;
  text-align: center;
  padding: 15px 0px 15px 0px;
  list-style: none;
  -webkit-box-shadow: 5px 2px 7px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 5px 2px 7px rgba(0, 0, 0, 0.15);
  box-shadow: 5px 2px 7px rgba(0, 0, 0, 0.15);
}

ul li {
  width:72px;
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 0px 15px 0px;
  background: #fff;
  cursor: pointer;
}

如何在每个css项目之前添加#nav。所以，如果我将#nav li {code}放在css中并将id =“＃nav”放在＆lt; li>然后代码不再起作用了。

TLDT：我希望我的css的每个部分都有一个特定的ID，因此ul li代码不会影响我网站的其他部分。

Answer 1

MathiasaurusRex答案的另一个答案。在我看来，你正在努力理解如何正确地编写选择器。以下可能有所帮助。

假设这个HTML结构......

<ul id="nav">
   <li class="home"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>

然后，以下CSS选择器ALL定位完全相同的元素。

#nav { /*code*/ }
ul { /*code*/ }
ul#nav { /*code*/ }

以上三者都针对相同的元素，但具有不同的特异性。特别是当与其他选择器一起使用时......例如......

ul li { /* code */ }

上述选择器中的代码适用于任何<li>元素，它是任何<ul>元素的后代。

#nav li { /* code */ }

上述选择器中的代码适用于任何<li>元素，该元素是ANSO具有ID“nav”的元素的后代。在上面的HTML示例中，也恰好是<ul>元素。

ul#nav li { /* code */ }

上面的选择器与它上面的第二个选择器基本相同，但它进一步增加了特征，即ID HAS位于<ul>元素上。如果ID“nav”位于不同的元素上，则代码将不适用。

另请注意，ID应该只在每页上使用ONCE。如果您有可能重复的内容，请改用类。 class="name"和.name

Answer 2

将#nav保留在ul上，并使用CSS选择器：#nav > li，它会选择li的任何直接#nav子项，并忽略其后的任何内容。

http://codepen.io/anon/pen/jubJI

Answer 3

id用作唯一选择器 - 也就是说，每页只能有一个给定的id。为此，您应该使用class='className'给class .className {Code;}，并使用{{1}}为其设置样式。

在制作导航栏时，将id名称添加到css的每个部分

3 个答案: