Question

代码就像这样，

<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”选择器，但至于我删除的部分，我不知道它是如何工作的，当我删除它时，有人能告诉我是什么原因导致了这个问题吗？

Answer 1

您只将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元素中的文本颜色将保持白色，如上面代码中所述。

Answer 2

行li, li a表示样式正在应用于所有LI和LI中包含的所有A。

所有造型都是相对应用的。应用于li, li a的任何含义都会影响每个LI，并且会嵌套在存在的LI内部。无论是父母还是儿童菜单。

由于.nav是应用于子菜单的类，因此您可以通过在选择器中包含.nav来定位li。例如：#nav .nav li a

要隐藏您的子菜单，您只需：

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

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

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

我是否回答了所有问题？

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

2 个答案: