为什么省略这个“li”CSS选择器会影响应用的样式？

的代码是这样的，为什么省略这个“li”CSS选择器会影响应用的样式？

<style type="text/css"> 
#nav, .nav, #nav .nav li { margin:0px; padding:0px; } 
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; 
position:relative;} 


li, li a {color:#000; text-decoration:none;} 
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; 
border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;} 
#nav li a {display:block; width:inherit; height:inherit;} 

ul.nav { display:none; } 
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; } 
#nav li ul.first {left:-1px; top:100%;} 
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; } 
li:hover { position:relative; z-index:2000; } 
</style> 
</head> 

<body> 
<ul id="nav"> 
    <li>Menu 1 
     <ul class="nav first"> 
      <li><a href="#">Menu 1</a></li> 
      <li>Menu 2</li> 
      <li>Menu 3</li> 
      <li>Menu 4</li> 
     </ul> 
    </li> 
    <li>Menu 2</li> 
    <li>Menu 3</li> 
    <li>Menu 4</li> 
</ul> 


</body>

在第三个元素在"li, li a"部分，如果我删除"li"选择只留下"li a"，会发生什么，当我徘徊在我的第一级列表项中，第二个列表项出现，但文本没有，我不知道它是背景影响还是文本影响，因为我找不到影响我的第二级列表的东西！

哦，顺便说一句，名为“菜单1”的第一级菜单下的第一个菜单是可见的，我认为它是因为“li a”选择器，但对于我删除的部分，我不知道它是如何工作的，当我删除它时，有人能告诉我是什么原因造成了这种麻烦吗？

来源

2013-03-07 Johnsy Omniscient

线li, li a意味着样式被应用到所有的LI的并载李的内部的所有A的。

所有的造型都被相对应用。意思是任何适用于li, li a的东西都会影响存在于LI中的每一个LI和一个嵌套。不管它是父母还是孩子的菜单。

由于.nav是应用于子菜单的类，因此您可以在选择器中包含.nav作为目标。例如：#nav .nav li a

要隐藏你的子菜单中，你需要简单：

#nav li ul.nav { display: none; }

然后让它出现在悬停（假设这是你想要的）

#nav li:hover ul.nav { display: block; }

我有没有回答所有的问题？

来源

2013-03-07 17:27:36 Michael

这是一个很好的解释，但不完全是我的问题，但谢谢你的贡献。 – 2013-03-07 18:44:16

你申请a标签才的“菜单1”的第一个子项。和你是下面的代码给文本颜色为白色（#FFF）：

#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

这就是为什么该文本不可见，因为背景是白色也。但是当你在li上徘徊时，由于您正在通过执行以下操作将背景颜色更改为黑色，因此文本可见。

li,li a {color:#000; text-decoration:none;} //assigning text color of li as black

如果从上面的代码中删除li那么li元素中的文本颜色将保持白色，你在很上面代码中提到。

来源

2013-03-07 17:29:09

我本可以给出更多的解释，但我有点忙于此。我希望你明白我的意思。 – 2013-03-07 17:30:13

从技术上讲，文字*是*可见的。它恰好与背景颜色相同。如果它具有'visibility：hidden'或'display：none'，那么您将无法突出显示文本。 – cimmanon 2013-03-07 17:31:35

@cimmanon这正是我的意思。让我编辑我的帖子，以便更好地理解。 – 2013-03-07 17:46:21

为什么省略这个“li”CSS选择器会影响应用的样式？

回答

相关问题