Question

使用CSS的区别是这样的：

.mainHeader nav ul li {.....

与此相比：

.mainHeader li {.....

只有后一种选择才能正常工作。由于nav中没有任何其他ul或mainHeader，我猜可以使用后者吗？

Answer 1

只要你永远不会包含任何其他匹配元素，它就没关系（好的意思是“它会起作用”）。一个好方法是在ul中添加一个类，然后选择它：

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

~~并且 - 顺便说一下 - 我猜mainHeader不是标签名称。如果是标识符，则必须使用#mainHeader和.mainHeader（如果是类）。~~（您更改了它）

Answer 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不会。

Answer 3

<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添加一个类或添加＆gt;如上所述，将在以后进行编辑时使代码更强大。

Answer 4

区别仅在于一件事，您可以列出.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 */ }

实现此目的

关于CSS层次结构的思考

4 个答案: