Question

有人可以告诉我以下选择器的作用吗？（菜单可以在下面找到）

   ul.nav li ul {
      width: 8em;
      position: absolute;
      left: −999em;
    }

这是否意味着：

1）选择带有类nav的所有无序列表，并将目标定为li和ul ??

<ul class="nav">
  <li><a href="/home/">Home</a></li>
  <li><a href="/products/">Products</a>
    <ul>
      <li><a href="/products/silverback/">Silverback</a></li>
      <li><a href="/products/fontdeck/">Font Deck</a></li>
    </ul>
  </li>


<li><a href="/services/">Services</a>
    <ul>
      <li><a href="/services/design/">Design</a></li>
      <li><a href="/services/development/">Development</a></li>
      <li><a href="/services/consultancy/">Consultancy</a></li>
    </ul>
  </li>
  <li><a href="/contact/">Contact Us</a></li>
</ul>

非常感谢，皮特

Answer 1

使用类＆＃34; nav＆＃34;

从ul中的任何li中选择所有UL

＆＃34; 1）选择带有类导航的所有无序列表并定位li和ul ??＆＃34;

nup选择器不是添加剂（所以他们不会选择li和ul） - 它们就像是通过树结构的路径。

将它读作＆＃34;面包屑＆＃34; ...

第一个ul.nav说我们正在削减整个html文档，只使用＆＃34; nav＆＃34;上课......

之后li表示我们实际上并不关心那个ul.nav我们只是只查看里面的任何li标签他们。

最终ul表示我们并不关心li代码，我们只关心这些ul代码中的li内容

Answer 2

它会选择ul s后代的所有li，这些ul s本身就是nav个{{1}}的后代。

Answer 3

 ul.nav li ul

这意味着：＆＃34;从<ul class="nav">＆＃34;

中的所有 li中选择所有 ul

此代码将选择：

<ul>
      <li><a href="/products/silverback/">Silverback</a></li>
      <li><a href="/products/fontdeck/">Font Deck</a></li>
</ul>

和

<ul>
      <li><a href="/services/design/">Design</a></li>
      <li><a href="/services/development/">Development</a></li>
      <li><a href="/services/consultancy/">Consultancy</a></li>
</ul>

Answer 4

CSS基本上将第一个嵌套无序列表元素（ul标签）放出文档流程（position：absolute）＆amp;将它们移出页面，这样就没有人看到它们了（左：-999em）。

Answer 5

向后读取选择器（从右到左）。

ul.nav li ul {}

将适用于任何：

ul
位于li
位于ul内，同时还有nav

在下面的HTML中，系统会选择ul id=ThisOne：

<ul class="nav">
  <li>
    Services
    <ul id="ThisOne">
      <li>Design</li>
      <li>Development</li>
      <li>Consultancy</li>
    </ul>
  </li>
</ul>

列出项目CSS样式

5 个答案: