1

像这样使用 CSS 有什么区别：

.mainHeader nav ul li {.....

与此相比：

.mainHeader li {.....

它只适用于后一种选择。由于我没有任何其他nav或ul在 中mainHeader，我想只使用后一个就可以了吗？

4

4 回答 4

2

只要您永远不会包含任何其他匹配元素，就可以了（可以表示“它会起作用”）。一个好的方法是向您添加一个类ul并以这种方式选择它：

ul.my-menu li {
  /* CSS styles */
}

而且 - 顺便说一下 - 我猜 mainHeader 不是标签名称。如果它是一个标识符，你必须使用#mainHeader，.mainHeader如果它是一个类。（你改变了它）

于 2013-11-02T13:05:04.837 回答
2

如果你有这样的 HTML 怎么办？

<div class="mainHeader">
  <nav>
    <ul>
      <li>Menu item</li>
      <li>Menu item
        <ul><li>With submenu</li></ul>
      </li>
    </ul>
  </nav>
</div>

现在，如果您只想单独设置“菜单项”和子菜单项的样式，唯一的方法就是使用以下选择器：

.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }

在这里使用>组合器很重要，以确保您为正确的元素设置样式。.mainHeader li单独是不行的。

于 2013-11-02T13:05:29.433 回答
0 
<div id="mainHeader">
 <ul><li>facebook</li><li>twiiter</li></ul>
   <div id="nav">
     <ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
   </div>
</div>

所以#mainHeader li{....} 将在 div 中执行所有 li#mainHeader nav ul li {....} 并将覆盖导航栏

向每个 ul 添加一个类或添加 > 将使代码在将来像上面建议的那样编辑时更强大。

于 2013-11-02T13:09:49.500 回答
0

区别仅在于一件事，您可以在旁边列出任何类型的元素.mainHeader，例如#mainHeader a p code div nav span ul li. 这将为 ID 为 mainHeader 的所有这些元素提供您在该元素的 { } 中放置的 CSS。

我给你举个例子。

HTML：

<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>

CSS：

.mainHeader div a p nav span {
    color: #000;
}

更新（1）：请理解，如果您要为特定事物赋予多个元素相同的方面，建议您这样做。这种用法的一个例子，假设你想要div a p相同的颜色，你可以通过div a p { color: #000; /* color your wanted */ }

于 2013-11-02T13:10:59.100 回答