Question

我正在尝试编写纯CSS两步层次结构下拉菜单。我不想自己复制其他代码并通过痛苦的领域耕作。

我想构建它，所以一切都可以通过在带有id的div中包含无序列表来控制，并在该id下设置所有内容。

我试图确定css如何看待html结构的逻辑

所以我的问题是例如可以区分

#nav ul ul {}

和

#nav ul ul ul {}

这是一个糟糕的方法吗？

如果我像

那样混合，我似乎得到了相同的效果

#nav li ul {}

和

#nav li li ul{}

如果有一个关于列表的正确语法是什么。我见过的每一个代码似乎都有所不同，无法找到明确的一致性。

如果你能对这一点有所了解，请提前感谢你。

示例：

我使用相同的逻辑去了代码，但我似乎无法使CSS区分它们。

    #nav ul ul {
    position:absolute;
    left:-9999px;
}

#nav ul li:hover ul{
    position:absolute;
    left:auto;
    border:1px solid blue;
    z-index:100;

}

和

   #nav ul ul ul{
    position:absolute;
    left:-9999px;
}

#nav ul ul li:hover ul{
    position:absolute;
    left:auto;
    border:1px solid blue;
z-index:200;
}

它会忽略更深的树并对两者施加第一组效果，即它不会隐藏第二个ul。（除非我通过＆gt;

具体说明

Answer 1

#nav ul ul {}

和

#nav ul ul ul {}

是完全不同的选择器。第一个只会在#nav中选择一个ul，如果它有一个ul父级（在“祖先”意义上并且不一定是直接父级），而第二个只会在#nav中选择一个具有两个ul父级的ul。与另一套相同。

Answer 2

据我所知，CSS选择器没有嵌套限制。但是，它可以通过为标记提供ID和类等标识符来节省下载时间，而不是尝试为特定元素编写全局规则。

的结果相同的原因

#nav li ul {}

和

#nav li li ul {}

是你在选择器之间使用空格。当CSS在选择器之间看到空格时，它会认为“在#nav中查找每个ul是li的下属”，这意味着甚至可以找到嵌套到很远的元素（如#nav li li li li li li ul）。如果你想选择JUST顶级ul，你可以使用＆gt;改为签字，如下：

#nav > li > ul {}

上面会选择像这样的元素（选中加星标的元素）：

<div id="nav">
  <li>
    **<ul>**
        <li>
          <ul>

而你正在做的是：

#nav li ul {}

将选择此项：

<div id="nav">
  <li>
    **<ul>**
        <li>
          **<ul>**

这是否更清楚？

Answer 3

CSS非常能区分#nav ul ul {}和#nav ul ul ul {}，它们实际上是针对不同的元素。 ul元素中的ul内的任意#nav，以及ul内ul内的ul内的任何#nav #nav li ul {} 1}}元素！

#nav ul ul {}和ul选择器产生相同结果的原因仅仅是因为HTML的结构方式......在li内找到了li隐含地也会在ul的父{{1}}中找到（希望有意义）。

有些人认为，出于性能原因，保持选择器尽可能短是一种很好的做法（例如，使用YSlow或Google Page Speed来分析页面的“效率低下”选择器的建议。）

但是，我确实在网站管理员论坛上看到了interesting post，这似乎与此略有不同。

CSS可以“看到”多远

3 个答案: